html5页面蒙版原理,js如何实现蒙版效果

5268f80b9b1e01f982625ef6fac83ca1.png

a8d5d05949a7497d6df0b0c3c38d7dde.png

我们来分析一下思路:

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教程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值