知识点
- 阻止冒泡：事件会产生冒泡现象，点击div会向完成不断传递，如果不阻止会触发外部有相同现象的函数。
if(event && event.stopPropagation){ // w3c标准 event.stopPropagation(); }else{ // IE系列 IE 678 event.cancelBubble = true; } - 实现居中
position: fixed; left: 50%; top: 50%; transform: translate(高度一半,宽度一半);
运行效果
点击立即登录，弹出一个div（模拟登录界面），点击div外会关闭蒙版，点击div内部会进行跳转。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 3000px}
#panel{
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
left: 0;
top:0;
opacity: .4;
display: none;
}
#login{
width: 300px;
height: 300px;
background-color: red;
border-radius: 5px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-150px,-150px);
display: none;
}
</style>
</head>
<body>
<button id="btn">立即登录</button>
<div id="panel"></div>
<div id="login"></div>
<script src="../MyTools/MyTools.js"></script>
<script>
window.addEventListener('load',function (ev) {
// 1. 监听按钮点击
var addEventListener = myTool.$('btn').addEventListener('click',function () {
// 阻止冒泡
if(event && event.stopPropagation){ // w3c标准
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
// 1.1 显示面板和蒙版
myTool.$('panel').style.display = 'block';
myTool.$('login').style.display = 'block';
// 1.2 隐藏滚动条
document.body.style.overflow = 'hidden'
});
// 2. 监听文档点击
document.addEventListener('click',function (ev1) {
var e = ev1 || window.event;
// 2.1 获取点击标签
// 兼容设置 IE需要用srcElement获取标签
var targetId = e.target ? e.target.id : e.srcElement.id;
// 2.2 判断
if (targetId !== 'login'){
myTool.$('panel').style.display = 'none';
myTool.$('login').style.display = 'none';
document.body.style.overflow = 'auto'
}else {
window.location.href = 'https://blog.csdn.net/KaiSarH';
}
})
},false)
</script>
</body>
</html>
