分享下自己寫的蒙層彈出框，作為菜鳥的我希望各位前輩指出不對的地方。
測試地址 demo： <a >點擊進入 </a>
效果圖
蒙層.png
1.html結(jié)構(gòu)代碼
<body>
<button id="btn_alert">彈出測試</button>
<div id="cm_layer">
<div class="custom-layer">
<h3>蒙層測試</h3>
<p>Lorem ipsum dolor sit amet, consecteturllit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consecteturllit anim id est laborum.</p>
</div>
</div>
<script src="js/jquery.mini.js"></script>
</body>
2.css樣式
.custom-layer{
width: 80%;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font: 16px "Microsoft YaHei UI";
background: #fff;
}
3.js
function alertMCLayer(layerStr, activeStr) {
let oLayer = $(layerStr);
//觸發(fā)彈出蒙層
$(activeStr).on('click',function(){
oLayer.css({
'display': 'flex',
'display': '-webkit-flex',
}) })
let layer_height = window.innerHeight + 'px';
oLayer.css({
'position': 'fixed',
'left': '0',
'top': '0',
'width': '100%',
'height': layer_height,
'background': 'rgba(0,0,0,0.7)',
'display': 'none',
'justify-content': 'center',
'align-items': 'center',
});
oLayer.find('div').on('click', function (event) {
event.stopPropagation();//取消事件冒泡，點擊外層時才會彈出 })
oLayer.on('click', function () {
$(this).css('display', 'none'); //點擊外層隱藏蒙層 })}
調(diào)用方法
$(function(){
alertMCLayer('#cm_layer','#btn_alert');
})
注意： 需要引入jquery框架 或者吧jquery鏈接改為
<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
測試地址： <a >點擊進入 </a>
分享下自己寫的蒙層彈出框，作為菜鳥的我希望各位前輩指出不對的地方。
