网页端弹窗创建的正确方式
月光倾城 2017-08-21 17:24:43 同花顺
# 前言
开发中我们经常会碰到这种需求---自定义弹窗，那么如何创建一个正确的弹窗呢？
# 考虑的方面
# 定位
弹窗一般都需要垂直水平居中，也许通过 flex 或者 transform 能够很快的实现垂直水平居中，但是 ie 下就炸了，下面我介绍一种垂直水平居中的技巧---使用三层 dom 来实现垂直水平居中
# html
<div class="center-outside">
<div class="center-middle">
<div class="center-inner">xxx</div>
</div>
</div>
1
2
3
4
5
2
3
4
5
# css
.center-outside {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
z-index: 999;
width: 100%;
}
.center-middle {
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
}
.center-inner {
position: absolute;
top: -50%;
left: -50%;
height: 100%;
width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
戳这里查看demo
# 动态生成 dom
本例子使用 jquery，需要注意以下几点
- 框弹出的时候需要禁止页面滑动
- 大于一屏的页面最右边会有一个滚动条，页面渲染的时候会忽略滚动条的宽度(15px)，但 position:fixed; height: 100%; width: 100%的布局不会忽略这个宽度，导致打开弹窗的一瞬间页面会像右移动 15px。解决方案是在弹窗打开时设置 body 的 padding-right 为 15px; demo 地址
- 弹窗弹出后点击关闭按钮或者背景框可以关闭弹窗，并且页面恢复可滚动状态
具体的代码请查看demo