html 5 桌面弹窗,HTML5+CSS3+jQuery实现弹出层
我们完全使用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代码。
你确定吗?
这是HTML+CSS+Javascript实现的一个弹出层效果,它是响应式的,它可以在所有现代浏览器上工作(包括PC和移动端)。
确 定
取 消
我们弹出层的最外层,也就是遮罩层.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插件,以插件的形式来调用,满足各种不同弹出层效果的需求,敬请关注。
html 5 桌面弹窗,HTML5+CSS3+jQuery实现弹出层相关推荐
- jQuery实现 弹出层效果
###jQuery实现 弹出层效果 点击弹出层:弹出弹出层 点击阴影:关闭弹出层 点击"关闭"关闭弹出层 整体代码如下: <!DOCTYPE html> <htm ...
- java让弹窗在最上层_layer弹出层显示在top顶层的方法
因为项目框架用了iframe,所以在用layer时,默认layer.open弹出的窗口只能在iframe子窗口区域显示.现在想让layer在父窗口或者说框架的最顶层显示,想到用top.layer.op ...
- php弹窗一次,网站广告弹出层(每天弹出一次)
网站广告弹出层(每天弹出一次) 可以有两种做法 一.是标识符存入数据库 二.利用Jquery.cookie 我这里做的是比较简单的用到的知识是Jquery.cookie, 这里要注意的一点是jquer ...
- html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
- JQuery 操作弹出层 iframe页面元素的方式
一.问题描述:如下图,在某个页面弹出一个iframe页面A,再在A弹出一个iframe页面B,需要操作这个B页面的元素 (一)图述 图1 (2)A页面的弹出方法,其中simpleDialog是封装好的 ...
- jbox弹窗_jbox很好的弹出层 很好的弹出层 - 下载 - 搜珍网
压缩包 : jbox-v2.3.rar 列表 jBox/i18n/jquery.jBox-zh-CN.js jBox/jquery-1.4.2.min.js jBox/jquery.jBox-2.3. ...
- html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- 弹出层之2:JQuery.BlockUI
JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...
- 一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
最新文章
- glance-50(秒解秒懂)
- android shape画边框,安卓用shape画圆角矩形边框
- 怎么样向云服务器上传文件_如何向云服务器传输文件
- react脚手架_react脚手架create-react-app安装与使用
- [大牛翻译系列]Hadoop(4)MapReduce 连接:选择最佳连接策略
- 求旋转数组的最小元素
- Linux 下安装 yum
- 在系统编程ISP及在应用编程IAP
- 由QCustomplot引发drawPolyline和drawLine的区别
- plc编程和python的联系_Python与三菱PLC通信
- libx264开发笔记(一):libx264介绍、海思平台移植编译
- 2021-10-07 浊音,清音,爆破音频谱分析
- 将a=[aaa,bbb,ccc]转化为aaa,bbb,ccc和将a=[111,222,333]转化为111,222,333的字符串作为输出的方法
- 哈工大SCIR出品《自然语言处理》新书,无套路送5本!
- 调用PC端、手机、平板摄像头拍照
- 悟已往之不谏,知来者之可追
- 严格别名规则“-fstrict-aliasing”和“-fno-strict-aliasing”及类型双关
- vue内使用 cytoscape(数据可视化)
- VMware : 处理器数量和每个处理器的核心数量
- 职场是个技术活-马未都
热门文章
- locationManager.getLastKnownLocation(locationProvider);//地理位置获取为null的解决方案
- 关于PCB设计必须掌握的基础知识
- 大气气溶胶期末复习笔记
- 字节跳动简历冷却期_从简历被刷到拿字节跳动 offer,我花了一年时间
- 删除磁盘中某个EFI系统分区
- WPF中使用Data Annotations验证Model
- outlook修改服务器设置方法,Outlook怎么设置?Outlook设置方法
- 基于simulink的FM调制解调系统仿真
- 毫米波雷达点迹聚类——DBSCAN聚类算法
- python 新媒体素材_新媒体运营日常工作是怎样的?