js 带遮罩层的弹出层
最近有个小伙伴问我关于mui的带遮罩层的弹出层，我给他发了个相关demo，但是因为他是新手的原因没有看懂，所以我写了一个单纯的原生的带遮罩层的弹出层dome。写这篇微博希望可以帮到需要的小伙伴。
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />
<style>
/*该元素是最外层的遮罩层*/
.tiJiao {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*记得提高它的层级*/
z-index: 3;
background-color: rgba(0, 0, 0, 0.2);
}
.tiJiao div.info {
position: absolute;
/*top.lieft 定位后不会完全居中*/
top: 50%;
left: 50%;
/*最重要的是margin的设置，通过负值来实现它的居中*/
margin-left: -125px;
margin-top: -97px;
width: 250px;
background-color: #FFFFFF;
padding: 20px 10px;
box-sizing: border-box;
border-radius: 5px;
}
.tiJiao div.info .info_content {
width: 100%;
display: table;
margin-bottom: 10px;
}
.tiJiao div.info .info_content label.title {
float: left;
height: 30px;
line-height: 30px;
}
.tiJiao div.info .info_content input[type=”radio”] {
vertical-align: -10%;
}
.tiJiao div.info .info_content .txt {
float: left;
width: calc(100% – 90px);
border: 1px solid #eee;
box-sizing: border-box;
height: 30px;
text-indent: 5px;
}
.tiJiao div.info .sub {
display: block;
width: 50%;
margin: 0 auto;
height: 36px;
border: none;
background-color: #ff5050;
margin-top: 20px;
border-radius: 5px;
color: #fff;
font-size: 14px;
}
.info_close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border: none;
}
</style>
</head>
<body>
<div id=”div1″ style=”padding:100px;”>弹出层一</div>
/*下面就是弹出层*/
<div id=”tiJiao” class=”tiJiao” style=”display:none”>
<div class=”info”>
<div class=”info_content”>
<label class=”title”>
现金支付：
</label>
<input class=”txt” type=”text” id=”zhiFuPay” value=”” disabled=”disabled” />
<label id=”toTal” class=”title”>元</label>
</div>
<input id=”zhifu” class=”sub” type=”button” value=”确认支付” onclick=”QueRenZhiFu()” />
<span type=”button” class=”info_close” id=”guanbi” />X</span>
</div>
</div>
<script type=”text/javascript”>
//一个小demo就不用jq了，原生写一下
var div1=document.getElementById(\’div1\’);
var tiJiao=document.getElementById(\’tiJiao\’);
var infoClose=document.getElementsByClassName(\’info_close\’)
div1.onclick=function(){
//console.log(tijiao)
tiJiao.style.display=\’block\’
}
for(i=0;i<infoClose.length;i++){
infoClose[i].onclick=function(){
tiJiao.style.display=\’none\’
}
}
</script>
</body>
</html>
html部分是从项目中拿出来的，样式我只是稍微一调，有些无关大雅的问题就没改，