代码描述:js弹出屏幕对话框。js点击弹出屏幕居中对话框效果代码
在实际应用中很多有这样的效果,就是进行某些操作之后会出现一个居中窗口,并且带有半透明背景效果,下面就通过代码实例介绍一下如何实现此功能,代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> html, body{ height:100%; margin:0px; font-size:12px; } .mydiv{ background-color:#ff6; border:1px solid #f90; text-align:center; line-height:40px; font-size:12px; font-weight:bold; z-index:99; width:300px; height:120px; left:50%; top:50%; margin-left:-150px; margin-top:-60px; position:fixed; } .bg{ background-color:#ccc; width:100%; height:100%; left:0; top:0; filter:alpha(opacity=50); opacity:0.5; z-index:1; position:fixed; } </style> <script type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; } window.onload=function(){ var obt=document.getElementById("bt"); var oclose=document.getElementById("close"); obt.onclick=function(){ showDiv(); } oclose.onclick=function(){ closeDiv() } } </script> </head> <body> <div id="popDiv" class="mydiv" style="display:none;"> <a href="#" id="close">关闭窗口</a> </div> <div id="bg" class="bg" style="display:none;"></div> <div style="padding-top:20px;"> <input type="button" id="bt" value="点击显示"/> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能