位置: 编程技术 - 正文

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、它是响应式的,并且兼容现代主流浏览器。

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

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插件是干什么的)

  • 增值税16%降到13%的留抵退税的情况说明咋写
  • 未按期纳税申报怎么处理
  • 交增值税及附加税怎么做账
  • 个体工商户怎么注销
  • 可供出售金融资产和长期股权投资
  • 工会经费发放奖金需要代扣个税吗
  • 小微企业税务服务站
  • 稽查查补的税款用什么时候的税率表示
  • 个人所得税当月计提下月申报
  • 外账成本倒推表格
  • 应收利息对应什么科目
  • 企业向个人借款需要交印花税吗
  • 破产清算收到的实收资本是破产资产吗
  • 银行付款退汇怎么做账
  • 营改增后挂靠开票作收入吗?
  • 金税三期收回长期投资所得税如何申报?
  • 印花税为什么不计入资产成本
  • 减免所得税怎么算税率
  • 网上申报时纳税人怎么填
  • 建筑业开具发票新规定
  • 境外所得税收抵免政策
  • 公司收境外汇款
  • 个税当月计提还是下月
  • 治理层和管理层包括哪些
  • ajax调用php函数
  • linux的用法
  • win10远程桌面连接不成功
  • 去年的发票忘记入账怎么处理
  • PHP:Memcached::getResultCode()的用法_Memcached类
  • 股权激励的账务处理
  • php实用的案例
  • 现在学修电脑怎么样
  • php pulsar
  • 出口退税退的是啥
  • 青龙面板拉库命令
  • 秋日里通往卢浮宫的杜乐丽花园,法国巴黎 (© Brian A. Jackson/Getty Images Plus)
  • 原材料按实际成本核算需设置的科目包括
  • 向投资者分配现金股利 为什么会导致所有者权益减少?
  • 罗卡购物村
  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
  • zen框架
  • vue.3
  • vscode搭建vue项目
  • 调出command命令窗口
  • 看望职工家属可以计入福利费吗
  • 专票减免政策
  • 公允价值变动收益借方是增加还是减少
  • 长期股权投资成本怎么计算
  • 培训费用是什么成本
  • 固定资产加速折旧是什么意思
  • 汽车4s店,厂家返修
  • 编制科目余额表的方法
  • 普通发票可抵税吗
  • 小规模收入账务
  • 房地产开发企业成本核算方法
  • 固定资产入账和未入账的区别
  • 应付账款从质保金扣除
  • 商品预计退回会扣钱吗
  • 小规模纳税人所得税优惠政策2023
  • 如何对会计感兴趣
  • 固定资产盘亏计入固定资产清理吗
  • mysql高级功能
  • window如何恢复系统
  • window10预览在哪里找
  • xp恢复回收站删除文件
  • linux系统中怎么创建目录
  • 加载的读音
  • win10系统桌面图标大小怎么设置
  • 深入理解rcu
  • 举例说明Java实现适配器模式
  • node. js教程
  • opengl矩形
  • js运行时错误
  • shell脚本编程实例
  • activity的作用和生命周期
  • 简述javascript的主要特点
  • 西安车位过户需要多少费用
  • 溧水到南京南地铁大站快车时刻表
  • 季度申报忘了报怎么办
  • 消费税记不记入成本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设