DOM

一个简单的弹出层设计思路

Posted by eric on 2016-11-16

转载需注明:前端唐小胖

最近在做项目的时候,客户需要做一个弹出层来展示视频。目前有很多弹出层的插件,如bootstrap的modal.js以及十分有名的layer插件。但是他们或多或少都与自己的框架绑定在了一起,调用的时候有时候需要定制化的需求又需要去改变框架的css规则和js。于是就有了今天这篇文章,让我们自己来设计一个弹出层插件,一是让自己可以熟悉一下实现的原理,二是以后可以进行二次封装来面对自己的定制化需求。

好,我们开始吧。

1.首先明确设计思路。我们可以用html来进行结构的语义化表达,css来提供表现,js来监听用户行为。

Github 下载

enter image description here

首先制作html页面,直接看代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="Yourcontainer">
<a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" >点击弹出层</a>
</div>
<div class="hw-overlay" id="hw-layer">
<div class="content-hidden">
<div class="hw-layer-wrap">
<div class="row">

<div class="col-md-12 col-sm-12">
<h4>纯粹的弹出层</h4>
<p>这是HTML+CSS+Javascript实现的一个弹出层效果,采用了响应式布局,希望玩的开心!</p>

<button class="btn btn-success hwLayer-ok">确 定</button>
<button class="btn btn-warning hwLayer-cancel">取 消</button>
</div>
</div>
</div>
</div>
</div>

注意data-show-layer用来绑定弹出层,另外使用href同样可以。需要给div注册一个ID。

完成html结构后我们来关注表现层的css。

我们需要考虑到弹出层和背景之间情况。

1
2
3
4
5
6
7
8
9
10
11

.hw-overlay {
/*背景层*/
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}

背景层用rgba调整透明度来体现差异效果。

1
2
3
4
5
6
7
.content-hidden {
/*弹出层父容器*/
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

弹出层的垂直居中布局。

1
2
3
4
5
6
7
8
9
10
.hw-layer-wrap {
/*弹出层本尊*/

box-sizing: border-box;
width: 570px;
border-radius: 3px;
background-color: #fff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12);
padding: 45px 50px;
}

最后给弹出层一点润色效果。至此我们完成了css部分的工作。

现在我们考虑使用js来监听用户行为,以此来操作dom达到效果。

我采用了jquery,主要考虑到描述清晰,以及一些动态效果方便我们调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$(function(){
//弹出层
function showLayer(id){
var layer = $('#'+id),
layerwrap = layer.find('.hw-layer-wrap');
layer.fadeIn();

}

//隐藏层
function hideLayer(){
$('.hw-overlay').fadeOut();
}
//绑定按钮
$('.hwLayer-ok,.hwLayer-cancel,.hwLayer-close').on('click', function() {
hideLayer();
});

//触发弹出层
$('.show-layer').on('click', function() {
var layerid = $(this).data('show-layer');
showLayer(layerid);
});

//点击或者触控弹出层外的遮罩层,关闭弹出层
$('.hw-overlay').on('click', function(event) {
if (event.target == this){
hideLayer();
}
});

//按ESC键关闭弹出层
$(document).keyup(function(event) {
if (event.keyCode == 27) {
hideLayer();
}
});
});

整体的思路就是用事件来驱动表现,监听行为调用相应函数即可。大家可以根据注释理解代码。十分简单。调用了两个动效来增加用户体验,用原生的js或者css3效果同样可以实现。

至此我们完成了全部的设计工作。思路就是前文所提到的用html来进行结构的语义化表达,css来提供表现,js来监听用户行为。
相较于其他的一些弹出层设计,这个设计不需要重新去渲染dom,减少了性能上的开销,仅仅只是用display:none来隐藏了容器。

以后有空会把他封装起来,作为一个组件来调用。实现的过程中参考了一些博文的内容。
完结~感谢阅读,请指正。

github地址