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',' 你好！这里是测试内容。这里的文字会显示在消息框当中。')">打开</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>
运行结果如下：
利用这个可以直接在网页当中需要的地方显示消息框，而且消息框的内容可以由开发人员动态指定。
上面案例是纯粹的html控件触发的事件。
在asp.net当中，要在服务器控件事件当中触发该js函数，可以用ClientScript.RegisterStartupScript。
ClientScript.RegisterStartupScript(this.GetType(), "", "<script>show('light','你好！这里是测试内容。这里的文字会显示在消息框当中。')</script>");
ClientScript.RegisterStartupScript是把相应的js代码嵌入到网页html流的末尾。