基于jquery的蒙层弹出框
2016-12-20 本文已影响283人
zoomsk
分享下自己写的蒙层弹出框，作为菜鸟的我希望各位前辈指出不对的地方。
测试地址 demo： <a href="https://zoomsk.github.io/%E7%AE%80%E4%B9%A6demo/custom_layer.html">点击进入 </a>
效果图
蒙层.png
1.html结构代码
<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);
//触发弹出蒙层
$(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'); //点击外层隐藏蒙层 })}
调用方法
$(function(){
alertMCLayer('#cm_layer','#btn_alert');
})
注意： 需要引入jquery框架 或者吧jquery链接改为
<script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
测试地址： <a href="https://zoomsk.github.io/%E7%AE%80%E4%B9%A6demo/custom_layer.html">点击进入 </a>
分享下自己写的蒙层弹出框，作为菜鸟的我希望各位前辈指出不对的地方。
