JavaScript蒙板(model)功能的简单实现代码
思路:
•创建一个蒙板,设置蒙板的堆叠顺序保证能将其它元素盖住
position:absolute; top:0; left:0; display:none; background-color:rgba(9,9,9,0.63); width:100%; height:100%; z-index:1000;•设置蒙板中内容的背景色和展示格式 width:50%; text-align:center; background:#ffffff; border-radius:6px; margin:100pxauto; line-height:30px; z-index:10001;•绑定事件,动态切换蒙板的display属性 functionshowModel(){ document.getElementById('myModel').style.display='block'; } functioncloseModel(){ document.getElementById('myModel').style.display='none'; }
注意事项:蒙板要采用绝对定位,宽和高要占満整个页面,堆叠顺序要大
源代码
<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <title>蒙板</title> <style> .container{ width:900px; margin:50pxauto; text-align:center; } #myModel{ position:absolute; top:0; left:0; display:none; background-color:rgba(9,9,9,0.63); width:100%; height:100%; z-index:1000; } .model-content{ width:50%; text-align:center; background:#ffffff; border-radius:6px; margin:100pxauto; line-height:30px; z-index:10001; } </style> </head> <body> <divclass="container"> <buttononclick="showModel()">弹出蒙板</button> <divid="myModel"onclick="closeModel()"> <divclass="model-content"> <p>你好啊,我是内容~~</p> <p> <buttonid="closeModel"onclick="closeModel()">关闭</button> </p> </div> </div> </div> <script> functionshowModel(){ document.getElementById('myModel').style.display='block'; } functioncloseModel(){ document.getElementById('myModel').style.display='none'; } </script> </body> </html>
以上所述是小编给大家介绍的JavaScript蒙板(model)功能的简单实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!