html js控制页面蒙版,js实现蒙版效果

本文实例为大家分享了js实现蒙版效果展示的具体代码，供大家参考，具体内容如下

思路

1.监听按钮的点击

2.阻止冒泡(最关键的一点)

3.让隐藏的显示出来

4.隐藏滚动条

5.点击文档：获取点击的标签

判断：让显示的都隐藏

显示滚动条

*{

margin: 0;

padding: 0;

}

html,body{

width:100%;

height:100%;

}

#panel{

width:100%;

height:2000px;

background-color:#000;

opacity: 0.4; //透明度

filter: alpha(opacity： 40); //用于兼容IE浏览器

position: absolute;

top:0;

left:0;

display: none;

}

#Box{

width:300px;

height:300px;

background-color: #fff;

position: absolute;

top:50%;

left:50%;

margin-left:-150px;

margin-top:-150px;

display: none;

border-radius: 5px;

}

登录

window.onload = function (){

//1.监听事件的点击

btn.onclick = function (event){

//1.0 阻止冒泡

if(event && event.stopPropagation){ //W3c标准

event.stopPropagation();

}else{ //IEx系列 IE 678

event.cancelBubble = ture;

}

//1.1隐藏的显现出来

$("Box").style.display = "block";

$("panel").style.display = "block";

//1.2隐藏滚动条

document.body.style.overflow = "hidden";

}

//2.点击文档

document.onclick = function (event){

var e = event || window.event;

//2.1获取点击的标签

var tranId = e.target ? e.target.id : e.srcElement.id; //target:获取当前操作对象

//2.2判断

if(tranId !== "Box"){

//1.1显示的隐藏出来

$("Box").style.display = "none";

$("panel").style.display = "none";

//1.2显示滚动条

document.body.style.overflow = "auto";

}else{

window.location.href = "http://www.baidu.com";

}

}

}

最为重要的一点是要阻止事件冒泡

获取对象的id： var tranId = e.target ? e.target.id : e.srcElement.id;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

总结

以上是编程之家为你收集整理的js实现蒙版效果全部内容，希望文章能够帮你解决js实现蒙版效果所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！