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

用Javascript弹出div定义的消息框并往块里面填写文字
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <title>LIGHTBOX EXAMPLE</title>
  5 <style>
  6 
  7 html, body {
  8  height: 100%;
  9  width: 100%;
 10 }
 11 .white_content {
 12  display: none;
 13  position: absolute;
 14  top: 25%;
 15  left: 25%;
 16  width: 50%;
 17  background-color:#DCDCDC;
 18  border: 2px solid #aaaaaa;
 19  z-index:1002;
 20 }
 21 .black_overlay {
 22  display: none;
 23  position: absolute;
 24  top: 0%;
 25  left: 0%;
 26  width: 100%;
 27  height: 100%;
 28  background-color:#f5f5f5;
 29  z-index:1001;
 30  -moz-opacity: 0.8;
 31  opacity:.80;
 32  filter: alpha(opacity=80);
 33 }
 34 .close {
 35  float:right;
 36  clear:both;
 37  width:100%;
 38  text-align:center;
 39  margin:0 0 6px 0;
 40 }
 41 /*.close a {
 42  color:#333;
 43  text-decoration:none;
 44  font-size:14px;
 45  font-weight:700
 46 }*/
 47 .con {
 48  text-indent:1.5pc;
 49  line-height:21px
 50 }
 51 .title
 52 {
 53      float:right;
 54      clear:both;
 55      width:100%;
 56      height:20px;
 57      text-align:left;
 58      margin:0 0 6px 0;
 59      background-color:#0000ff;
 60      color:#ffffff;
 61 }
 62 .titlePicture
 63 {
 64      float:right;
 65      clear:both;
 66      width:100%;
 67      height:20px;
 68      text-align:right;
 69      margin:0 0 6px 0;
 70      background-color:#0000ff;
 71      color:#ffffff;
 72 }
 73 </style>
 74 <script>
 75 function show(tag,message)
 76 {
 77  var light=document.getElementById(tag);
 78  var fade=document.getElementById(fade);
 79  var content=document.getElementById(content);
 80  light.style.display=block;
 81  fade.style.display=block;
 82  content.innerHTML=message;
 83  
 84 }
 85 function hide(tag)
 86 {
 87  var light=document.getElementById(tag);
 88  var fade=document.getElementById(fade);
 89  light.style.display=none;
 90  fade.style.display=none;
 91 }
 92 </script>
 93 </head>
 94 <body>
 95 <a href="javascript:void(0)" onclick="show(‘light‘,‘&nbsp;&nbsp;&nbsp;&nbsp;你好!这里是测试内容。这里的文字会显示在消息框当中。‘)">打开</a>
 96 <div id="light" class="white_content">
 97             <div class="title">来自网页的消息 <img src="./关闭图标.jpg" align="right" onclick="hide(‘light‘)"/></div>
 98             <!-- <div class="titlePicture"><img src="./关闭图标.jpg"  onclick="hide(‘light‘)"/></div> -->
 99       <div id="content" class="con"> 
100                 
101       </div>
102       <div class="close">
103           <input id="btnClose2" type="button" value="确定" onclick="hide(‘light‘)" /><br/>
104           <!--   <a href="javascript:void(0)" onclick="hide(‘light‘)">关闭</a>   -->
105         </div>
106 </div>
107 <div id="fade" class="black_overlay"></div>
108 </body>
109 </html>
View Code

运行结果如下:

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

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

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

 

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

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

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

 

 

用Javascript弹出div定义的消息框并往块里面填写文字,布布扣,bubuko.com

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

上一篇:C++实现快速排序(源代码)


下一篇:C语言之预处理