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


Posted in Javascript onMay 16, 2016

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

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

效果展示        源码下载

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

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

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

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

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

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

HTML

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

<a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">点击弹出层</a>

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

<div class="hw-overlay" id="hw-layer"> 
<div class="hw-layer-wrap"> 
<span class="glyphicon glyphicon-remove hwLayer-close"></span> 
<div class="row"> 
<div class="col-md-3 col-sm-12 hw-icon"> 
<i class="glyphicon glyphicon-info-sign"></i> 
</div> 
<div class="col-md-9 col-sm-12"> 
<h4>你确定吗?</h4> 
<p>这是HTML+CSS+Javascript实现的一个弹出层效果,它是响应式的,它可以在所有现代浏览器上工作(包括PC和移动端)。</p> 
<button class="btn btn-success hwLayer-ok">确 定</button> 
<button class="btn btn-warning hwLayer-cancel">取 消</button> 
</div> 
</div> 
</div> 
</div>

我们弹出层的最外层,也就是遮罩层.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来设置小屏幕下的弹出层居中的问题。

.hw-overlay{display:none; position: fixed; top:0;left:0;width:100%;height:100%; background-color: rgba(0,0,0,0.3);z-index:10;} 
.hw-layer-wrap{box-sizing:border-box; width:570px; position:absolute;left:50%;top:50%; margin-left:-285px; border-radius:3px; background-color:#fff; box-shadow:1px 2px 4px 0 rgba(0,0,0,0.12); padding:45px 50px;} 
.hwLayer-close{position:absolute; right:20px; top:20px; width:20px; height:20px; cursor:pointer; font-size:20px; color:#ccc;} 
.hw-layer-wrap .hw-icon{color:#b4d8f3;font-size:86px;text-align:center;} 
.hw-layer-wrap h4{margin:5px 0 30px; font-size:24px; color:#383c3e;} 
.hw-layer-wrap p{margin:30px 0; line-height:22px; color:#595d60; text-align:left;} 
@media (max-width:768px){ 
.hw-layer-wrap{width:350px; margin-left:-175px; margin-top:-200px; padding:45px 50px; text-align:center;} 
} 
@media (max-width:400px){ 
.hw-layer-wrap{width:250px; margin-left:-125px;padding:25px 30px;} 
}

Javascript

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

$(function(){ 
//展示层 
function showLayer(id){ 
var layer = $('#'+id), 
layerwrap = layer.find('.hw-layer-wrap'); 
layer.fadeIn(); 
//屏幕居中 
layerwrap.css({ 
'margin-top': -layerwrap.outerHeight()/2 
}); 
} 
//隐藏层 
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(); 
} 
}); 
});

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

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

Javascript 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 #Javascript
Bootstrap所支持的表单控件实例详解
May 16 #Javascript
移动端横屏的JS代码(beta)
May 16 #Javascript
js实现带农历和八字等信息的日历特效
May 16 #Javascript
jQuery 常用代码集锦(必看篇)
May 16 #Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 #Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
小学一年级评语大全
2014/04/22 职场文书
任命书怎么写
2015/03/02 职场文书
自荐信模板大全
2015/03/27 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
余世维讲座观后感
2015/06/11 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫