当前位置:

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

本文最后更新于2014-10-28,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共3029个字,读完预计8分钟。

Tips: 该插件版本已更新到v2.0.5。
修复一些用户反馈的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+ 浏览器。

jquery+css3 多功能表单弹出层插件(原创)-何海宝的博客

在线演示地址:

去专门演示页面查看

使用说明:

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, 谢谢~

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

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

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

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

我要说两句

  • 34 条回应
    • 头像
      andy 发表于

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

    • 头像
      让您受精了 发表于

      给力,大赞

    • 头像
      李斌 发表于

      怎么返回点击的对象

    • 头像
      Nicosw 发表于

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