最近的一个项目,设计稿上有个地方是弹出层,但是没有看见关闭按钮或者关闭图片,这让我很疑惑,这要怎么关闭?用户体验不会变差么?但想了想无所谓了,大不了以后再改,加个按钮或者图片点击隐藏而已,于是我就按着设计稿上的做了,今天特地分享出来(默认样式因为是单独一个css文件,太长,就用 * 强制清除默认样式了,但是推荐不这样用,至于为什么可以百度)。
接下来贴代码,首先是css的:
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.containenr {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background: url(./images/xiaolv.jpg)no-repeat;
background-size: cover;
position: relative;
}
.dialog {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .7);
}
.content {
width: 600px;
height: 600px;
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -300px;
}
.btn {
width: 200px;
height: 40px;
text-align: center;
line-height: 40px;
color: red;
font-weight: 600;
background-color: aquamarine;
margin: 0 auto;
cursor: pointer;
}
.hide {
display: none;
}
然后是页面的布局,比较简单:
<div class="containenr">
<div id="btn" class="btn">点我显示遮罩层</div>
<div id="dialog" class="dialog hide">
<div id="content" class="content"></div>
</div>
</div>
最后是js,也比较简单:
window.onload = function () {
var dialog = document.getElementById('dialog');
var content = document.getElementById('content');
var btn = document.getElementById('btn');
//点击显示遮罩层
btn.onclick = function () {
dialog.classList.remove('hide');
// dialog.style.display = 'block';
}
//点击除黄色区域隐藏遮罩层
dialog.addEventListener('click',function(e){
//阻止冒泡
window.event ? window.event.cancelBubble = true : e.stopPropagation();
var e = window.e || e;
var el = e.target || e.srcElement;
//获取当前点击区域的className
var el_name = el.className;
console.log(el_name);
//如果点击区域等于内容区域就return,否则就隐藏
if(el_name == 'content') {
return;
}else {
dialog.classList.add('hide');
// dialog.style.display = 'none';
}
})
}
到此为止这次分享就结束了,本人也是自学的前端现在在实习,技术有限可能会有不足的地方希望大神能指点,有问题可以回复讨论,最后希望能看到本篇文章的前端小伙伴早日成为巨佬,共勉!