<style>body html{width:100%;}body{height:3000px;}*{margin:0;padding:0;}#panel{width:100%;height:100%;background-color:#000;opacity:0.4;/*解决IE兼容透明度*/filter: alpha(opacity:40);position:absolute;left:0;top:0;display:none;}#login{width:300px;height:300px;background: skyblue;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;position: fixed;left:50%;top:50%;margin: -150px 0 0 -150px;display:none;}</style>
<body><button id="btn">立即登录</button><div id="panel"></div><div id="login"></div><script>window.onload=function () {//1.监听按钮的点击document.querySelector("#btn").onclick=function (e) {//点击登录按钮阻止冒泡if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}//1.1显示面板和蒙版document.querySelector("#panel").style.display="block";document.querySelector("#login").style.display="block";//当出现蒙版时,去除body的滚动条document.body.style.overflow="hidden";};//2.点击文档document.onclick=function (event) {var e=event||window.event;//2.1获取点击的标签var targetId=e.target?e.target.id:e.srcElement.id;if(targetId!=='login'){document.querySelector("#panel").style.display="none";document.querySelector("#login").style.display="none";//当出现蒙版时,去除body的滚动条document.body.style.overflow="visible";}}}</script></body>
