蒙层

xiaoxiao2021-02-28  98

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蒙层</title> <style> *{ margin:0; padding: 0; } #mark{ width: 100%; height: 1000px; background: rgba(0,0,0,.5); overflow: hidden; } #inner{ width: 300px; height: 400px; background: #fff; margin:100px auto; } </style> </head> <body> <div id="mark"> <div id="inner"></div> </div> <script> var mark = document.getElementById('mark'); var inner = document.getElementById('inner'); // 点击蒙层任何地方,隐藏蒙层 mark.onclick = function(){ mark.style.display = 'none'; } inner.onclick = function(e){ var e = e || window.event; // e.stopPropagation();//阻止事件的传播(包括冒泡和捕获) // 兼容处理 if(e.stopPropagation){ e.stopPropagation(); }else{ // ie浏览器 e.cancelBubble = true; } } </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-81727.html

最新回复(0)