简单弹出框的实现方式（一）

最近的项目需要在移动端改版，基本每个页面都设计弹出框和遮罩层的问题。于是记录一下这个简单的弹出框方法，以后或许用到的地方还多着，不喜勿喷，哈哈

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;
　　width: 100%;
　　height: 0;//可见度无
　　top: 100%;
　　background: rgba(0, 0, 0, 0.1);遮罩层颜色透明度
　　z-index: 1;//示情况而定
　　transition: all .3s linear;//弹出方式
　　overflow: hidden;//隐藏弹出框内容

　　.caikindBox{　//宽高都用 “%” 设置

　　　　position: absolute;
　　　　width: 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");