弹出层用于向用户展示详细信息，互动性很强。弹出层有对话框和模态窗口的形式，这里我称之为弹出层，我的同事也是这样。一般我们都喜欢使用fancybox等成熟的弹出层插件，但在本文中，我会先抛弃插件，介绍如何使用jQuery CSS3 Html5实现弹出层。

下载效果显示源代码。

我们完全使用HTML5 CSS3 jQuery来实现一个基本的弹出层效果，所以我们可以在示例中随意修改弹出层外观样式甚至js方法调用。我们最终做出的弹出层效果应该是响应式的，也就是说弹出层在桌面PC和移动终端上都可以很好的显示，并且兼容现代浏览器。在演示中，我使用了Bootstrap风格。当然，你也可以写一个样式来完成页面布局。

基本弹出层应满足以下要求：

1.点击按钮/链接触发弹出图层，该图层应该有一个半透明的蒙版图层；

2.单击弹出层的关闭按钮、取消按钮或蒙版层将关闭隐藏的弹出层；

3.也可以使用Esc键关闭弹出层；

4.它反应灵敏，兼容现代主流浏览器。

超文本标记语言

首先，我们在页面上放置一个触发弹出层的链接，它也可以是一个按钮。请注意，我们为它设置了一个数据显示层属性，该属性值对应于弹出层的id，这意味着弹出层与数据显示层相关联。

a class=' BTN TN-info BTN-LG show-layer ' data-show-layer=' hw-layer ' role=' button '点击弹出层/a显然，与上述链接关联的弹出层的id是HW-layer。那么，选择我们来准备弹出的硬件层的html代码。

div class=' HW-overlay ' id=' HW-layer ' div class=' HW-layer-wrap ' Span class=' glyphicon-remove hwLayer-close '/Span div class=' row ' div class=' col-MD-3 col-sm-12hw-icon ' I class=' glyphicon glyphicon-info-sign '/I/div div class=' col-MD-9 col-sm-12 ' H4您确定吗？/h4p这是一个由HTML CSS Javascript实现的弹出层效果，反应灵敏，可以在所有现代浏览器(包括PC和手机)上工作。/p button class=' btnbtn-成功HW图层-确定'确认/button button class=' btnbtn-警告HW图层-取消'取消/button /div /div /div我们弹出图层的最外层是蒙版图层。硬件覆盖。我们将使用CSS来控制它是一个半透明的层。r在。hw-layer-wrap body层，我们可以设置弹出层的内容，当然内容由你决定。在本文中，弹出层的内容是一个确认对话框，类似于确认()的窗口。使用了bootstrap的Col-*网格布局，还使用了字体图标。其实最重要的是需要一个蒙版层和一个主体层，内容可以根据项目要求进行定制，因为可能是表单，也可能是纯文本描述。

半铸钢钢性铸铁(Cast Semi-Steel)

CSS也是关键部分。我们首先设置蒙版图层，默认情况下应该是不可见的，位置固定，覆盖整个页面。它也是半透明的。我们在这里设置背景黑色和透明度0.3，比如background-color:rgba (0，0，0，0.3)。然后是主层。hw-layer-wrap，我们设置它的宽度并计算它的位置。我们可以为宽度预设一个值，但是高度的内容是不确定的，所以这里不需要设置具体的值。我们将在后面的js部分处理高度，然后设置居中和边框阴影等效果。参见Helloweba文章：如何水平和垂直居中DIV。弹出层中的内容样式可以自由设置，最终解决了使用媒体查询在小屏下设置弹出层中心的问题。HW-overlay { display : none；位置：固定；top:0left:0宽度：100%；高度：100%；背景-color: rgba(0，0，0，0.3)；z索引：10；} .HW-layer-wrap { box-sizing : border-box；宽度width:570px位置：绝对；左侧：50%；top :50%；左边距：-285 px；边界半径：3 px；背景-color : # fff；box-shadow :1 px 2px 4px 0 rgba(0，0，0，0.12)；padding:45px 50px} .hwLayer-close { position : absolute；right:20pxtop:20px宽度：20 px；高度：20 px；cursor:pointer指针；font-size :20 px；color: # ccc} .硬件层包装。HW-icon { color : # b4d 8 F3；font-size :86 px；文本对齐：居中；} .HW-layer-wrap H4 { margin 33605 px 0 30px；font-size :24 px；color: # 383c3e} .HW-layer-wrap p { margin 336030 px 0；线高：22 px；color: # 595d60text-align : left；} @media(最大宽度：768px){。HW-layer-wrap { width :350 px；左边距：-175 px；边距-top :-200 px；padding:45px 50px文本对齐：居中；} } @media (max-width:400px){。hw层包装{ width:250px左边距：-125 px；padding:25px 30px} } Javascript

我们使用jQuery来处理触发弹出层和关闭弹出层的效果，所以需要提前预加载jQuery库。ShowLayer(id)是一个用户定义的函数，用于显示弹出层。当你点击按钮或链接调用这个showLayer(id)函数时，它会逐渐显示效果并计算弹出层的高度位移距离，从而使弹出的主层水平和垂直居中。函数hideLayer()隐藏弹出层，可以通过fadeOut()或hide()实现。最后，添加触发蒙版图层时关闭弹出图层的代码和使用Esc按钮时关闭弹出图层的代码。

$(function(){//show layer function show layer(id){ var layer=$(' # ' id)，layer wrap=layer.find(')。硬件层包装’)；layer . fadein()；//layer wrap . CSS({ ' margin-top ' :-layer wrap . outer height()/2 })；}//Hide layer函数hidelayer () {$(')。HW-overlay’)。fade out()；} $('.hwLayer-好的。hwLayer-取消，hwLayer-close’)。on('click '，function(){ HideLayer()；});//触发弹出层$('。显示层')。on ('click ')，function () {var layerid=$ (this)。数据('显示层')；showLayer(layerid)；});//单击或触摸弹出层外的半透明蒙版层，关闭弹出层$()。HW-overlay’)。on ('click ')，function (event) {if (event。target==this){ hide layer()；} });//按ESC键关闭弹出层$(文档)。keyup(函数(事件){if(事件。key code==27){ hide layer()；} });});事实上，在这里，已经完成了一个基本的弹出层效果。我们在这里只是做一个基本的弹出层，你还可以继续扩展代码。我们看到了很多弹出层插件，很多都是动态直接的操作DOM，也就是先通过js代码创建一个createElement，然后将内容追加到主体中。如果这种方式频繁操作DOM，会消耗一定的性能，所以从性能的角度，我推荐使用本文提供的弹出层。

好了，接下来我们把弹出层的代码打包成一个简单的jQuery插件，可以以插件的形式调用，以满足各种弹出层效果的需求。请注意。