最近有个小伙伴问我关于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="确认支付" οnclick="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.οnclick=function(){ //console.log(tijiao) tiJiao.style.display='block' }for(i=0;i<infoClose.length;i++){
infoClose[i].οnclick=function(){ tiJiao.style.display='none' } } </script> </body></html>
html部分是从项目中拿出来的，样式我只是稍微一调，有些无关大雅的问题就没改，