1.效果:页面上有个登录按钮,点击登录按钮后进入页面,点击蓝色方块进入目标页面,无法滚动!
2.自己的工具库MyTool.js
var myTool = {
$: function (id) {
return typeof id === "string" ? document.getElementById(id) : null;
},
scroll: function () {
if (window.pageYOffset !== null) { //最新的浏览器
return {
//里面相当于字面量对象或JSON对象,是有区别的
"top": window.pageYOffset,
"left": window.pageXOffset
}
} else if (document.compatMode === 'CSS1Compat') { //W3C标准
return {
"top": document.documentElement.scrollTop,
"left": document.documentElement.scrollLeft
}
}
return {
"top": document.body.scrollTop,
"left": document.body.scrollLeft
}
},
show: function (ele) {
ele.style.display = 'block';
},
hide: function (ele) {
ele.style.display = 'none';
},
client: function () {
if (window.innerWidth !== null) { //最新的浏览器
return {
//里面相当于字面量对象或JSON对象,是有区别的
"width": window.innerWidth,
"height": window.innerHeight
}
} else if (document.compatMode === 'CSS1Compat') { //W3C标准
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
}
return {
"width": document.body.scrollWidth,
"height": document.body.scrollHeight
}
},
/*阻止冒泡*/
stopBubble: function (eve) {
if(eve && eve.stopPropagation){
eve.stopPropagation();
}else{ //IE678
eve.cancelBubble = true;
}
}
};
3.页面元素:
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#panel{
width: 100%;
height: 100%;
background-color: #000000;
opacity: .4;
position: absolute;
left: 0;
top: 0;
display: none;
}
#logo{
width: 300px;
height: 300px;
background-color: skyblue;
border-radius:5px ;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-150px,-150px);
display: none;
}
</style>
<button id="btn">登录</button>
<div id="panel"></div>
<div id="logo"></div>
<script src="MyTool/MyTool.js"></script>
4.JS函数
<script>
window.addEventListener('load',function (ev) {
//1.监听按钮点击
myTool.$('btn').addEventListener('click',function (ev1) {
myTool.stopBubble(ev1); //阻止冒泡!!!
//1.1显示面板和蒙版
myTool.$('panel').style.display = 'block';
myTool.$('logo').style.display = 'block';
//1.2隐藏滚动条
document.body.style.overflow = 'hidden';
});
//2.点击文档
document.addEventListener('click',function (ev2) {
var e = ev2 || window.event; //这个是兼容!
//2.1获取点击对象
var targetId = e.target ? e.target.id : e.srcElement.id; //这个也是兼容!!!
//2.2判断
if(targetId !== 'logo'){
myTool.$('panel').style.display = 'none';
myTool.$('logo').style.display = 'none';
document.body.style.overflow = 'auto';
}else{
window.location.href = 'https://mp.csdn.net/console/article?spm=1000.2115.3001.5448';
}
})
},false)
</script>