代码描述:JavaScript弹出 半透明遮罩。JavaScript带有半透明遮罩的弹出层实例代码
标题中的效果在当前网页中有大量的应用,下面就是一段这样的代码实例,点击一个按钮可以弹出一个对话框,并且对话框的背景是一个灰色的半透明的全屏遮罩效果,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>遮罩层弹出窗口代码实例</title> <style type="text/css"> .black_overlay { display:none; position:absolute; top:0%; left:0%; width:100%; height:100%; background-color:black; z-index:1001; -moz-opacity:0.8; opacity:.80; filter:alpha(opacity=80); } .white_content { display:none; position:absolute; top:25%; left:25%; width:50%; height:50%; padding:16px; border:16px solid orange; background-color:white; z-index:1002; overflow:auto; } </style> <script type="text/javascript"> window.onload=function() { var thelink=document.getElementById("thelink"); var light=document.getElementById("light"); var fade=document.getElementById("fade"); var oclose=document.getElementById("close"); thelink.onclick=function() { light.style.display='block'; fade.style.display='block'; } oclose.onclick=function() { light.style.display='none'; fade.style.display='none'; } } </script> </head> <body> <a href="javascript:void(0)" id="thelink">点击这里打开窗口</a> <div id="light" class="white_content"> <a href="javascript:void(0)" id="close">Close</a> </div> <div id="fade" class="black_overlay"></div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能