最近看到好多童鞋都在找弹出框和遮罩层的实现。
先来说遮罩层是个神马？
其实就是你弹出个东西，然后其他地方变黑了一点。就像遮住了其他地方一样。
那么实现原理呢？
就是设置一个div，宽度，高度是屏幕视口那个大（当然，如果你的document超出了window的大小，那么设置的时候最好还是用document），设置一个 z-index 属性，让它在弹出框下面，在其他地方的上面。原理就是这样啦！
话不多说，接下来上代码：
html：
<!DOCTYPE html>
<html>
<head lang="zh-CH">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,init-scale=1">
<title></title>
<style>
*{
margin:0;padding: 0;font-size: 16px;
}
.pop{
position: fixed;
display: none;
border-radius: 10px;
background-color: #fff;
z-index: 200;
width:240px;
height:500px;
border:1px solid #CACACA;
font:1rem "微软雅黑";
}
.pop .title{
width:240px;
height:440px;
line-height: 440px;
text-align: center;
border-bottom:1px solid #CACACA;
}
.pop .btn{
text-align: center;
width: 49%;
height: 60px;
line-height: 60px;
float:left;
color: #2B8AFB;
}
#btn-left{
border-right:1px solid #CACACA;
}
</style>
</head>
<body>
<button id="btn1">弹出对话框</button>
<!-- 特别注意：弹出框所处的div中不能包含任何字符，包括空格，换行，注释 -->
<div id="container"></div>
<script src="jquery.min.js"></script>
<script src="pop.js"></script>
<script>
var text = '<div id="pop" class="pop"><div class="title" id="title">'+"弹出框"
+'</div><div class="btn" id="btn-left">'+'确定'+'</div><div class="btn" id="btn-right" οnclick="cancel(this)">'+'取消'+'</div></div>';
$("#btn1").click(function(){
//这里设置的两个数值是 pop 的宽度和高度，设置是为了第一次弹出时显示在正中。
openPop("#container","#pop",240,500,text);
});
function cancel(){
$("#container").empty();
}
</script>
</body>
</html>
js：pop.js
/**
* function: 产生弹出框
* author: 杨勇
* time: -4-17
* describe: 依赖jquery
*/
var winWidth,
winHeight,
docWidth,
docHeight,
popWidth,
popHeight,
popTop,
popLeft,
parentId,
popId,
text;
/**
* 创建pop
* @param parentId：存放弹出框的容器ID，里面不能包含任何代码，包括空格，换行，注释等。
* @param popId：弹出框的ID。
* @param popWidth：pop框的宽度
* @param popHeight：pop框的高度
* @param popHeight：pop框的具体html代码
*/
function openPop(parentId, popId, popWidth, popHeight,text){
this.parentId = parentId;
this.popId = popId;
this.text = text;
this.popWidth = popWidth;
this.popHeight = popHeight;
setPopPosition();
createPop(parentId, popId);
}
/**
* 设置弹出框位置，这里为屏幕正中。
* @param pop
* @param popWidth
* @param popHeight
*/
function setPopPosition(){
winWidth = $(window).width();
winHeight = $(window).height();
docWidth = $(document).width();
docHeight = $(document).height();
popTop = (winHeight - popHeight)/2;
popLeft = (winWidth - popWidth)/2;
}
function createPop(parentId,popId){
var str = '<div class="yy-cover" style="background-color: rgba(0,0,0,0.3);z-index: 100;display: none;position: absolute;top:0;left: 0;"></div>'+ text;
$(parentId).html(str);
$(".yy-cover").css({"display":"block","width":winWidth + "px","height":docHeight + "px"});
$(popId).css({"display":"block","top": popTop + "px","left":popLeft + "px"});
}
/**
* 改变窗口大小时重置pop框的位置
*/
$(window).resize(function(){
setPopPosition();
if($(parentId).html() != ""){
$(".yy-cover").css({"display":"block","width":winWidth + "px","height":docHeight + "px"});
$(popId).css({"display":"block","top": popTop + "px","left":popLeft + "px","transition":"all .5s ease"});
}
})
O啦！
下载：/detail/yy839126257/8604301
