1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 html, body{ 13 100%; 14 height: 3000px; 15 } 16 17 #panel{ 18 100%; 19 height: 100%; 20 background-color: #000; 21 opacity: .4; 22 23 position: absolute; 24 left: 0; 25 top: 0; 26 27 display: none; 28 } 29 30 #login{ 31 300px; 32 height: 300px; 33 background-color: skyblue; 34 border-radius: 5px; 35 36 position: fixed; 37 left: 50%; 38 top: 50%; 39 transform: translate(-150px, -150px); 40 41 display: none; 42 } 43 </style> 44 </head> 45 <body> 46 <button id="btn">立即登录</button> 47 <div id="panel"></div> 48 <div id="login"></div> 49 <script src="js/MyTool.js"></script> 50 <script> 51 window.addEventListener('load', function (ev) { 52 // 1. 监听按钮的点击 53 myTool.$('btn').addEventListener('click', function () { 54 55 // 阻止冒泡 56 if(event && event.stopPropagation){ // w3c标准 57 event.stopPropagation(); 58 }else{ // IE系列 IE 678 59 event.cancelBubble = true; 60 } 61 62 // 1.1 显示面板和蒙版 63 myTool.$('panel').style.display = 'block'; 64 myTool.$('login').style.display = 'block'; 65 66 // 1.2 隐藏滚动条 67 document.body.style.overflow = 'hidden'; 68 }); 69 70 // 2. 点击文档 71 document.addEventListener('click', function (ev1) { 72 var e = ev1 || window.event; 73 74 // 2.1 获取点击标签 75 console.log(e.target); 76 var targetId = e.target ? e.target.id : e.srcElement.id; 77 78 // 2.2 判断 79 if(targetId !== 'login'){ 80 myTool.$('panel').style.display = 'none'; 81 myTool.$('login').style.display = 'none'; 82 83 document.body.style.overflow = 'auto'; 84 }else { 85 window.location.href = 'http://www.itlike.com'; 86 } 87 }) 88 }, false) 89 </script> 90 </body> 91 </html>
