jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)(jquery?)

编辑：rootadmin

推荐整理分享jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)(jquery?)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jqueryw3c,jquery1,jquery.css,jquery.html,jquery w3cschool,jquery.css,html5 jquery,jquery.css,内容如对您有帮助，希望把文章链接给更多的朋友！

弹出层用来向用户展示详细的信息，交互性非常强。弹出层有对话框、模态窗口等形式，这里我都把他们叫做弹出层，我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等，但在本文，我将先抛弃插件，给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。

效果展示源码下载

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

一个基本的弹出层应该满足以下需求：

1、点击按钮/链接触发弹出层，弹出层应该有半透明的遮罩层；

2、点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层；

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

4、它是响应式的，并且兼容现代主流浏览器。

HTML

首先我们在页面放置一个用来触发弹出层的链接，也可以是个按钮button，注意的是我们给它设置一个data-show-layer属性，这个属性值对应的就是弹出层的id，也就是说通过data-show-layer来关联弹出层。

很显然，上面的链接关联的弹出层的id是hw-layer。那好，选择我们来准备弹出层hw-layer的html代码。

我们弹出层的最外层，也就是遮罩层.hw-overlay，我们会使用CSS控制它是一个半透明的层，用来隔开弹出层和页面主体内容。r然后在.hw-layer-wrap主体层内，我们可以设置弹出层的内容，当然内容由你来定，我们本文结合实例弹出层的内容是一个确认对话框，类似window的confirm()。内容使用了bootstrap的col-*栅格布局，还用了glyphicon字体图标。其实最关键的就是需要遮罩层和主体层，内容可以根据项目需求自定义，因为它可能是个表单、也可能是个纯文字说明的内容。

CSS

CSS也是关键的部分，我们先设置遮罩层，它默认情况下应该是不可见的，位置上fixed固定的，并且是覆盖整个页面的，它还是半透明的，我们这里设置了背景黑色、透明度0.3，如background-color: rgba(0,0,0,0.3)。然后主体层.hw-layer-wrap，我们设置它的宽度，计算它的位置。宽度我们可以预设一个值，高度由于内容多少不确定，这里我们不用设置一个具体的值，在后面的js部分会对高度处理，然后设置居中以及边框阴影等效果。有关水平和垂直居中的设置可以参阅Helloweba文章：如何让DIV水平和垂直居中。弹出层里面的内容样式可以自由设置，最后就是使用media query来设置小屏幕下的弹出层居中的问题。

Javascript

我们使用jQuery来处理触发弹出层和关闭弹出层效果，应此需要预先加载jQuery库。showLayer(id)是一个自定义的函数，用来展示弹出层。当点击按钮或链接调用这个showLayer(id)函数，它会渐现的效果展示，并且计算弹出层的高度位移距离，使得弹出主体层水平和垂直方向的居中。而函数hideLayer()就是隐藏弹出层，fadeOut()或者hide()就能实现。最后再加上触发遮罩层的时候关闭弹出层以及使用Esc按钮的时候关闭弹出层的代码。

其实到这里，一个基本的弹出层效果已经做好了。我们这里只是做一个基本的弹出层，你也可以进行继续扩展代码。我们看过很多弹出层插件，很多都是动态直接操作DOM的，也就是通过js代码先createElement，然后在将内容append到body里的，这种方式如果是频繁操作DOM的话会消耗一定的性能，所以从性能角度考虑的话，我推荐使用本文提供的弹出层方式。

好了，接下来我们将弹出层的代码封装成一个简单的jQuery插件，以插件的形式来调用，满足各种不同弹出层效果的需求，敬请关注。

总结jQuery插件开发中的一些要点基础1、jQuery插件开发主要使用如下两个方法：1.1、添加静态方法jQuery.extend(object);为扩展jQuery本身，为类添加新的方法，可以理解文添加静态方法。$.exte

jQuery插件制作的实例教程一、jQuery插件的类型1.jQuery方法很大一部分的jQuery插件都是这种类型，由于此类插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作

jQuery 获取多选框的值及多选框中文的函数 DOM结构我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述.labelclass="input_checkbox"inputtype="checkbox"name="sell_area"vlaue="0"span甘肃/span/labellabelclass

标签: jquery?

本文链接地址:https://www.jiuchutong.com/biancheng/386576.html 转载请保留说明！

上一篇：jQuery 常用代码集锦(必看篇)(jquery常用函数)

下一篇：总结jQuery插件开发中的一些要点(jquery插件是干什么的)