html div全屏遮罩层,前端开发 CSS全屏遮罩效果

python 前端开发工具|前端开发教学视频百度云|团队开发前端页面流程

要点：

1、position:absolute;

left:0;

top:0;

right:0;

bottom:0;

这可以让容器实现全屏效果

2、阻止事件冒泡

容器mask与对话框dialog是父子关系，按事件冒泡机制，dialog的click会触发mask的click事件，所以

必须阻止事件冒泡。

兼容浏览器，有两种方式

if(event){//ff

event.stopPropagation();

}

else{//ie

window.event.cancelBubble = true;

}

3、event.target

也可以用

if(event.target==this){

…

}

用来检查触发事件的对象

另外注意背景透明不要使用opacity，因为这样会使子元素也会继承opacity，可以用rgba，但遗憾的是ie8不支持rgba。

/p>

<

margin: 0;

padding: 0;

}

.mask {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

z-index: 100;

background: rgba(180, 60, 0, .4);

display: none;

}

.mask .dialog {

margin: 200px auto;

width: 350px;

height: 150px;

border: 1px solid #ccc;

background: #fff;

box-shadow: 0 0 5px #F97C0F;

padding: 20px;

text-align: center;

background: #F97C0F;

}

.mask .dialog p {

font-size: 35px;

color: #fff;

}

.mask .dialog div input {

outline: 0;

background: #FBBA81;

height: 50px;

line-height: 50px;

font-size: 25px;

border: none;

border-bottom: 1px solid #333;

text-align: center;

}

a {

color: #000;

font-size: 18px;

}

☹

Open Dialog

$(function () {

$(“#open”).click(function (e) {

$(“.mask”).show();

});

$(“.dialog”).click(function (e) {

if (e) {//ff

e.stopPropagation();

console.log(“e”);

}

else {//ie

window.event.cancelBubble = true;

}

});

$(“.mask”).click(function (e) {

// if(e.target==this){

// $(“.mask”).hide();

// }

$(“.mask”).hide();

});

});

前端手机端开发|前端开发手机六位密码|前端开发手机默认字体