<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>LIGHTBOX EXAMPLE</title>

 <style>

 html, body {

  height: 100%;

  width: 100%;

 }

 .white_content {

  display: none;

  position: absolute;

  top: 25%;

  left: 25%;

  width: 50%;

  background-color:#DCDCDC;

  border: 2px solid #aaaaaa;

  z-index:1002;

 }

 .black_overlay {

  display: none;

  position: absolute;

  top: 0%;

  left: 0%;

  width: 100%;

  height: 100%;

  background-color:#f5f5f5;

  z-index:1001;

  -moz-opacity: 0.8;

  opacity:.80;

  filter: alpha(opacity=80);

 }

 .close {

  float:right;

  clear:both;

  width:100%;

  text-align:center;

  margin:0 0 6px 0;

 }

 /*.close a {

  color:#333;

  text-decoration:none;

  font-size:14px;

  font-weight:700

 }*/

 .con {

  text-indent:1.5pc;

  line-height:21px

 }

 .title

 {

      float:right;

      clear:both;

      width:100%;

      height:20px;

      text-align:left;

      margin:0 0 6px 0;

      background-color:#0000ff;

      color:#ffffff;

 }

 .titlePicture

 {

      float:right;

      clear:both;

      width:100%;

      height:20px;

      text-align:right;

      margin:0 0 6px 0;

      background-color:#0000ff;

      color:#ffffff;

 }

 </style>

 <script>

 function show(tag,message)

 {

  var light=document.getElementById(tag);

  var fade=document.getElementById('fade');

  var content=document.getElementById('content');

  light.style.display='block';

  fade.style.display='block';

  content.innerHTML=message;

 }

 function hide(tag)

 {

  var light=document.getElementById(tag);

  var fade=document.getElementById('fade');

  light.style.display='none';

  fade.style.display='none';

 }

 </script>

 </head>

 <body>

 <a href="javascript:void(0)" onclick="show('light','&nbsp;&nbsp;&nbsp;&nbsp;你好！这里是测试内容。这里的文字会显示在消息框当中。')">打开</a>

 <div id="light" class="white_content">

             <div class="title">来自网页的消息 <img src="./关闭图标.jpg" align="right" onclick="hide('light')"/></div>

             <!-- <div class="titlePicture"><img src="./关闭图标.jpg"  onclick="hide('light')"/></div> -->

       <div id="content" class="con"> 

       </div>

       <div class="close">

           <input id="btnClose2" type="button" value="确定" onclick="hide('light')" /><br/>

           <!--   <a href="javascript:void(0)" onclick="hide('light')">关闭</a>   -->

         </div>

 </div>

 <div id="fade" class="black_overlay"></div>

 </body>

 </html>

运行结果如下：

利用这个可以直接在网页当中需要的地方显示消息框，而且消息框的内容可以由开发人员动态指定。

上面案例是纯粹的html控件触发的事件。

在asp.net当中，要在服务器控件事件当中触发该js函数，可以用ClientScript.RegisterStartupScript。

ClientScript.RegisterStartupScript(this.GetType(), "", "<script>show('light','你好！这里是测试内容。这里的文字会显示在消息框当中。')</script>");

ClientScript.RegisterStartupScript是把相应的js代码嵌入到网页html流的末尾。

用Javascript弹出div定义的消息框并往块里面填写文字的更多相关文章

  1. [转]创建一个JavaScript弹出DIV窗口层的效果

    本文转自:http://www.soso.io/article/23698.html <!doctype html> <html lang="en"> &l ...

  2. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

  3. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  5. html弹出div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 练习：javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JavaScript弹出窗口方法

    本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才 ...

  8. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  9. 运用fancybox弹出div的方式弹出视频界面

    fancybox可以弹出很多窗体,甚至一个swf格式的小视频.但这样的swf视频播放的时候并没有任何的控件.只能重头看到尾,或者关闭.我们可以利用fancybox弹出div盒子的方式配合html5很快 ...

随机推荐

  1. BZOJ 3687 简单题

    bitset维护某个和是否存在. bit<<x:所有子集的和+x. #include<iostream> #include<cstdio> #include< ...

  2. 前App Store高管揭秘：关于“苹果推荐”的七大真相

    相信你已经看过很多这样那样关于如何获得苹果商店推荐的攻略了,但其实很多人依然陷入了很大的误区.前不久采访了前App Store团队高管Greg Essig,向各位开发者揭示关于获得苹果推荐的真相. 在 ...

  3. iOS开发:JavaScriptCore.framework的简单使用--JS与OC的交互篇

    iOS7之后苹果为众猿推出了JavaScriptCore.framework这个框架,这个框架为大家在与JS交互上提供了很大帮助,可以在html界面上调用OC方法并传参,也可以在OC上调用JS方法并传 ...

  4. Channel Allocation_四色定理

    Description When a radio station is broadcasting over a very large area, repeaters are used to retra ...

  5. 全面认识.NET框架（一）

    重新学习下.NET框架,在这里将会对.net框架逐步的学.加深一下对.net的认识.如果那个地方有错误,希望大家能够指出来.谢谢. 知识有限,先逐步了解下.net包含的什么.我就是写写我目前想了解的内 ...

  6. IDataReader转换成list通用方法

    public static IList<T> ReaderToList<T>(this IDataReader dr) { //DateTime dt = DateTime.N ...

  7. 转载blog_Linux下Tomcat日志定期清理 及 logrotate 配置

    服务器上的tomcat的catalina.out文件越来越大,查看起来很不方便,以前每次都是想起来的时候手工清理一下(cat /dev/null > catalina.out),后来发现了log ...

  8. CentOS x64安装Virtualbox

    今天在CentOS 6.5 x64系统上装了个Virtualbox,这里记录下整个安装过程. 1.去官网下载Virtualbox及其扩展包,同时还要下载dkms,具体如下: Virtualbox:ht ...

  9. Spring学习笔记--spring+mybatis集成

    前言: 技术的发展, 真的是日新月异. 作为javaer, 都不约而同地抛弃裸写jdbc代码, 而用各种持久化框架. 从hibernate, Spring的JDBCTemplate, 到ibatis, ...

  10. Codeforces Round #369 (Div. 2) A B 暴力 模拟

    A. Bus to Udayland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...