源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js实现在页面上弹出蒙板技巧简单实用

  • 时间:2021-07-07 12:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js实现在页面上弹出蒙板技巧简单实用
蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明。maskLayer 在popWindow上面,用于显示蒙板的信息,比如“载入中……“
[u]复制代码[/u] 代码如下:
<html> <head> <style type="text/css"> .popWindow { background-color:#9D9D9D; width: 100%; height: 100%; left: 0; top: 0; filter: alpha(opacity=50); opacity: 0.5; z-index: 1; position: absolute; } .maskLayer { background-color:#000; width: 200px; height: 30px; line-height: 30px; left: 50%; top: 50%; color:#fff; z-index: 2; position: absolute; text-align:center; } </style> <script language="javascript" type="text/javascript"> function showDiv() { document.getElementById('popWindow').style.display = 'block'; document.getElementById('maskLayer').style.display = 'block'; } function closeDiv() { document.getElementById('popWindow').style.display = 'none'; document.getElementById('maskLayer').style.display = 'none'; } </script> </head> <body> <div onclick="showDiv()" style="display:block; cursor:pointer"> 弹出蒙板 </div> <div id="popWindow" class="popWindow" style="display: none;"> </div> <div id="maskLayer" class="maskLayer" style="display: none;"> <a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;"> 关闭蒙板 </a> </div> </body> </html>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部