当前位置: 首页 » 案例分享 » jquery+css3 多功能表单弹出层插件(原创)
 |  全屏浏览  |  字号调整:

jquery+css3 多功能表单弹出层插件(原创)

2014-10-28 10:18:41 案例分享 19 7.83 k 百度已收录
本文最后更新于2014-10-28,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六晚上好, 本文除去代码部分,共3017个字,预计阅读时间需要8分钟。

Tips: 该插件版本已更新到v2.0.4。
修复一些用户反馈的bug, 比如:IE8不支持rgba写法导致的遮罩不显示,Firefox下esc关闭有问题等问题,并增加ie8以下的提示和是否需要执行关闭的验证,支持AMD加载等。
demo请猛戳下面的演示地址,需要下载的朋友请至Github: https://github.com/hehaibao/hDialog上获取,此处不再提供下载功能~

———————— 华丽分割线 ————————–

最近没事写了一个jQuery插件,结合了很多css3动画效果,很多自定义参数,可以帮你方便快速的做出很炫很酷的弹出层。

简介:

jQuery.hDialog.js 是一个用来创建一个模态窗口的 jQuery 插件,基于 CSS3 过渡实现。您可以利用 Animate.css 中的转换或自行创建自己的过渡效果。支持 Firefox、Chrome、Safari、Opera 和 IE 10+ 浏览器。

在线演示地址:

demo1

demo2

使用说明:

1 引入jQueryjQuery.hDialog.min.js

2 页面中,请将要放入弹框的内容放在比如id="HBox"的容器中,然后将box的值换成该ID即可;

举个🌰: $(element).hDialog({'box':'#HBox'});

更多示例:

(PS: 此插件中所有的参数都将用以下示例的方式给出来)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*
 * 以下是单独的调用示例,你只需要自定义弹框的样式即可。
 *          - $(element).hDialog(); //默认调用弹框;
 *          - $(element).hDialog({box: '#demo'}); //自定义弹框容器ID/Class;
 *          - $(element).hDialog({boxBg: '#eeeeee'}); //自定义弹框容器背景;
 *          - $(element).hDialog({modalBg: '#eeeeee'}); //自定义遮罩背景颜色;
 *          - $(element).hDialog({width: 500}); //自定义弹框宽度;
 *          - $(element).hDialog({height: 400}); //自定义弹框高度;
 *          - $(element).hDialog({position: 'top'}); //弹框位置(默认center:居中,top:顶部居中,left:顶部居左,bottom:底部居右)
 *          - $(element).hDialog({effect: 'fadeOut'}); //弹框关闭效果(结合animate.css里的动画,默认:zoomOut);
 *          - $(element).hDialog({hideTime: 2000}); //弹框定时关闭(默认0:不自动关闭, 以毫秒为单位)
 *          - $(element).hDialog({modalHide: false}); //false:点击遮罩背景不关闭弹框,反之关闭;
 *          - $(element).hDialog({isOverlay: false}); //是否显示遮罩背景(默认true:显示,false:不显示)
 *          - $(element).hDialog({escHide: false}); //false:按ESC不关闭弹框,反之关闭;
 *          - $(element).hDialog({autoShow: false}); //是否页面加载完成后自动弹出(默认false点击弹出,true:自动弹出)
 *          - $(element).hDialog({autoHide: true}); //是否页面加载完成后自动关闭弹出(默认false: 不关闭,true: 关闭)
 *          - $(element).hDialog({types:2,iframeSrc:'http://css.doyoe.com/',iframeId:'iframeHBox',width:960,height:600}); //调用框架
 * 
 * 也可以整个覆盖(tips: 默认的无需写):  
 *          - $(element).hDialog({
 *                box: '#demo',
 *                boxBg: '#eeeeee',
 *                modalBg: '#eeeeee',
 *                width: 500,
 *                height: 400,
 *                positions: 'top',
 *                effect: 'fadeOut',
 *                hideTime: 3000,
 *                isOverlay: false,
 *                modalHide: false,
 *                escHide: false,
 *                autoShow: false,
 *                autoHide: false,
 *                types: 1,
 *                iframeSrc: '',
 *                iframeId: 'iframeHBox',
 *                beforeShow: function(){ alert('执行回调'); },
 *                afterHide: function(){ alert('执行回调'); }
 *            });
 *
 * 下面是简单的扩展方法(以后再慢慢补充吧):
 *          - $.tooltip('错误提示文字'); 或者  $.tooltip('正确提示文字',4000,true,callback);  //内置2种提示风格(参数1为提示文字,参数2为自动关闭时间,参数3:true为正确,false为错误,参数4: 回调函数)
 *          - $.showLoading('正在加载...',90,30); 或者  $.hideLoading(); //显示/移除加载(参数1为说明文字,参数2为宽度,参数3为高度,默认宽高为140*48,可不填写)
 *          - $.goTop(); //返回顶部,(参数1:和屏幕底部的距离,参数2:和屏幕右侧的距离; PS:自定义一定要加单位,比如px,em, 也可以是百分比哦)
 *          - $.dialog('alert','提示','hello'); 或者 $.dialog('confirm','提示','确认么?',0,function(){ alert('ok'); });  //消息框,(参数1:消息框类型(alert/confirm),参数2:消息框标题;参数3:消息框内容度;参数4:消息框自动关闭时间,以毫秒为单位(默认0:不自动关闭);参数5: 回调函数)
 *          - $.closeDialog(); 或者 $.closeDialog(function(){ alert('ok'); }); //关闭消息框,(参数1:回调函数)
 */

更新日志:

2018-07-06:

1.兼容IE8不支持RGBA写法导致遮罩不出现的问题,并对IE8以下浏览器做出提示;

2.修复FireFox下esc的问题;

3.增加关闭弹出层前的验证,防止esc键重复回调;

2018-06-26:

1.增加AMD支持,修复已知bug

插件依赖:

jQuery

animate.css, by Daniel Eden

TODO

弹出层可自由拖拽(有时间的话 😝)

github地址:http://hehaibao.github.io/hDialog/

Tips: 博客演示代码可能更新不及时,最新代码请至GitHub上下载~ 如有问题请提Issues,谢谢

写在最后

感谢jQueryanimate.css的开发人员!

如果这款弹出层插件对您有帮助,请star支持一下。欢迎pr, 谢谢~

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果觉得文章对你有帮助,请点个赞或者打赏支持一下,谢谢!

本文标题:jquery+css3 多功能表单弹出层插件(原创)

本文地址:http://www.hehaibao.com/jquery-css3-plugin/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

34条评论
  • andy - Windows 7  |  Chrome 59.0.3071.115

    2017-08-14 15:57

    请问,使用iframe方式引入到不同的页面弹出
    1. 如何不通过点X,以“关闭”按钮方式关闭弹出窗口?
    2.如何从弹出窗口传递参数到先前页面?

  • 让您受精了 - 未知操作系统  |  未知浏览器

    2017-01-17 11:41

    给力,大赞

  • 李斌 - 未知操作系统  |  未知浏览器

    2016-08-11 16:30

    怎么返回点击的对象

  • Nicosw - 未知操作系统  |  未知浏览器

    2016-03-28 22:41

    怎样改变触发方式?多种方式触发怎样改?

  • 尹京九 - 未知操作系统  |  未知浏览器

    2016-03-24 10:07

    支持老旧浏览器吗?ie7-9支持吗

    1. [博主] 正在载入_ - 未知操作系统  |  未知浏览器

      2016-03-25 11:04

      支持 Firefox、Chrome、Safari、Opera 和 IE 10+

  • Dream - 未知操作系统  |  未知浏览器

    2016-03-07 11:23

    东西真心不错 ,支持[太开心]

  • 秋小卑 - 未知操作系统  |  未知浏览器

    2016-03-06 15:07

    可以了,解决了,原来是我自己的js函数重新定义了一下$符号,导致覆盖了原来的jquery中的函数

  • [博主] 正在载入_ - 未知操作系统  |  未知浏览器

    2016-03-04 21:05

    有报错吗

    1. 秋小卑 - 未知操作系统  |  未知浏览器

      2016-03-05 16:53

      没报错,就是不会弹出模态框了,用alert();测试也不管用。好像是我写的js文件和那个jquery.hDialog.js文件不能同时引用,否则就模态框这个不管用

  • 李坤 - 未知操作系统  |  未知浏览器

    2015-12-11 23:53

    怎么在调用的同时传递参数进去呢?假设我ajax里面需要一个页面上的数据,求告知。我的qq号是593921602 帮帮忙

  • kwun - Windows NT  |  Chrome 31.0.1650.63

    2015-11-06 17:24

    居然和我的wp一个模板

  • 用户已认证 - Windows NT  |  搜狗浏览器 2.X

    2015-11-04 19:53

    很好很好 虽然自己也整合了一套 不过没你的全

  • gaososo - Windows 7  |  Chrome 42.0.2311.152

    2015-10-30 14:02

    请问怎么传ID值呢?

  • dan - Windows NT  |  Chrome 31.0.1650.63

    2015-10-27 23:03

    怎样用js控制弹出框显示和关闭?不是点击按钮时触发

  • mrzhan - Windows 7  |  Chrome 42.0.2311.152

    2015-09-16 11:28

    已经解决了

  • johnny - Mac OS X  |  Chrome 42.0.2311.152

    2015-09-12 11:03

    真的挺好的!

  • mrzhang - Windows 7  |  Internet Explorer 8.0

    2015-09-12 09:27

    动态生成的元素 怎么添加你这个效果啊,通过class添加没反应啊!

    1. [博主] haibao - Mac OS X  |  Chrome 41.0.2272.101

      2015-09-12 21:29

      你说的这个问题,解决掉我会邮件回复你的,不过你自己也可以多研究研究哈

      1. admin - Windows 7  |  Chrome 42.0.2311.152

        2015-09-16 11:21

        已经解决了,例如我要绑定class=”demo6″ 我在点击事件的方法中 加入这样$(‘.demo6’).click();就可以了

      2. 大兵 - Windows 7  |  Firefox 57.0

        2017-12-02 14:54

        引入了相关的js,css,引用了方法但是不报错,就是不出现弹窗?

        1. [博主] haibao - Mac OS X  |  Chrome 62.0.3202.94

          2017-12-03 12:40

          用https://jsfiddle.net/贴代码看看你是如何使用的?

  • d sd d d - Windows 7  |  Chrome 42.0.2311.152

    2015-09-12 09:11

    append 动态生成的元素 不能添加你的这个效果。求解决

    1. [博主] haibao - Windows 7  |  Chrome 41.0.2272.89

      2015-09-14 09:17

      等append之后,你再添加动画的class

      1. mrzhan - Windows 7  |  Internet Explorer 10.0

        2015-09-16 11:26

        添加class 也不行, 例如我的打开弹出框的c元素的class是demo6,就应该在动态元素的onclick事件加入 $(‘.demo6’).click(); 就可以了

  • 张浩 - Windows 7  |  Chrome 42.0.2311.152

    2015-09-12 09:11

    append 动态生成的元素 不能添加你的这个效果。求解决1

  • 求解决办法 - Windows 7  |  Chrome 43.0.2357.81

    2015-09-09 17:14

    提交成功后 无法关闭,定时关闭的时候 JS报错了 有个对象没获取到,包括演示站也是这样

  • 噁魔獵掱 - 未知操作系统  |  未知浏览器

    2015-04-25 16:39

    你好,我是程序员一枚,想问一下,如何能够打开网页就弹出窗口,不用点击按钮才打开

  • 偷天换琴 - 未知操作系统  |  未知浏览器

    2015-03-17 16:37

    在 easyui datagrid 的tool工具按钮中调用时,没有遮罩层。不知道这是什么原因呢?

  • 杜森 - Windows 7  |  Chrome 31.0.1650.63

    2014-12-18 22:39

    var $this = $(this),opt = $this.data(‘hDialog’); 这段代码是获不到值得 data(“”) 方法中是不能有大写的 这也是jQuery的一个bug.

  • 766xs - Windows 7  |  Chrome 31.0.1650.63

    2014-11-25 07:50

    解压时提示错误??index.html损坏。

    1. haibao - Windows 7  |  Chrome 39.0.2171.65

      2014-11-25 09:17

      你用什么解压的,我们本地都能正常解压的~

  • E享乐 - Windows XP  |  Chrome 37.0.2062.124

    2014-11-03 19:13

    很强大的插件,可用范围很广~

    1. [博主] haibao - Windows 7  |  Firefox 33.0

      2014-11-07 09:15

      多谢支持!


发表评论

电子邮件地址不会被公开。 必填项已用*标注