最近的项目需要在移动端改版，基本每个页面都设计弹出框和遮罩层的问题。于是记录一下这个简单的弹出框方法，以后或许用到的地方还多着，不喜勿喷，哈哈
1、html
遮罩层放入body层下，作为弹出框的父元素，设置响应样式，主要结构如下：
<div id="showQishubox" class="opacitbox">//遮罩层
<div class="qishuBox" id="qishuBox">//内容弹出框
<p>查看选择</p>
<ul>
<li value="2">2期</li>
</ul>
<span id="qsCancel">取消</span>
</div>
</div>
2、css
css在最好都用 “%” 设置，易控制。
.opacitbox{
position: fixed;
100%;
height: 0;//可见度无
top: 100%;
background: rgba(0, 0, 0, 0.1);遮罩层颜色透明度
z-index: 1;//示情况而定
transition: all .3s linear;//弹出方式
overflow: hidden;//隐藏弹出框内容
.caikindBox{ //宽高都用 “%” 设置
position: absolute;
100%;
height: 80%;//设置弹出框高度
background: #fff;
margin-top: 15%;
ul{
height:10%;//最好设置一下高度
}
}
}
3、js
在显示的时候，只需要将遮罩层的高度height：100%，top：0 //此处都是相对body元素的宽高
//隐藏弹出框
function cancelQishu() {
$("#showQishubox").css({
"height":"0",
"top":"100%"
});
}
//显示弹出框
function funshowcaikind() {
$("#showczbox").css({
"height":"100%",
"top":"0"
});
}
其实 实现方式很简单，就是简单的从下方往上弹出，写下来，下次用到的时候直接copy就好。
、、、、、补充、、、、
在移动端的时候，避免出现往下滑的时候，上面是弹出框，下面是内容的现象。
一般数据可能会超过屏幕的高度---吧弹出框高度意外的内容都隐藏掉 。$("html,body").css("overflow", "hidden");
在弹出框隐藏---解除此操作。$("html,body").css("overflow", "visible");