javascript弹出层组件easyDialog v2.0

easyDialog在经过一段时间的使用后,对使用中碰到的一些问题进行了总结,最近花了点时间对原来的代码进行了重构和优化,并加入了一些新功能。原来的版本只是为了实现简单的弹出层的基本功能,从项目的角度来说就是如何能快速的完成项目,而这个版本不仅仅是实现基本的功能,更多的考虑了弹出层如何更好更轻松的应用于项目中。

easyDialog v2.0新增的功能:

1. 增加了默认的弹出层内容模板,如果只是一些简单的应用,自己可以不去写弹出层内容的结构,而只需传几个简单的参数即可,原来的使用方法:

easyDialog.open({
  container : 'demoBox'
});

使用默认的内容模板,那么container参数可以这么用:

easyDialog.open({
  container : {
    header : '弹出层标题',
    content : '欢迎使用easyDialog : )',
	yesFn : btnFn,
    noFn : true
  }
});

显示的效果如下图所示:

easyDialog v2.0截图

如果要修改默认的内容模板的样式,可以修改下载文档中的easydialog.css文件来实现你想要的样式。

2. 增加了拖拽效果,使弹出层有更好的用户体验,并且自定义弹出层内容也可以轻松实现拖拽效果。

3. 内部增加了缓存系统、微型事件处理系统,对弹出层内容也做了缓存,使弹出层性能更佳。

另外修改了一个参数的命名,原来的isOverlay改成了overlay,原来的弹出层各元素的id也重新命名,尽量避免冲突。

更详细的演示与说明:http://stylechen.com/wp-content/uploads/demo/easydialog-v2.0/index.html

下载地址:http://stylechen.com/wp-content/uploads/download/easydialog-v2.0.zip

查看以往版本:http://stylechen.com/easydialog.html

easyDialog 的最新版本已集成到了 easy.js 的组件库:http://easyjs.org/docs/components/dialog.html

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/easydialog-v2-0.html
如需转载请以链接形式注明原载或原文地址。

“javascript弹出层组件easyDialog v2.0”目前已有 76 条评论

  • *
  • *

评论列表

  • tcdona说道:

    学习膜拜 代码和界面一样漂亮,赞!

  • 问道说道:

    有意思,谢谢分享

  • pepsi说道:

    兼容性有问题,在ie8下无法运行。

  • 雨夜带刀说道:

    @pepsi
    在发布这个版本前我已经测试过各个版本的浏览器,没发现有问题,如果在你的IE8中无法运行,可以把更详细的情况告诉我,也可以给我发邮件chenmnkken@gmail.com

  • 浮世繁华说道:

    ie8下js错误: 尚未实现 easydialog.min.js 。 位置:行 10 字符 6

  • kinsunhoo说道:

    很漂亮,很细混。不知道能不能用在自己的网站上。

  • tmaic说道:

    怎么下不了?能发到我邮箱吗?谢谢~

  • tmaic说道:

    我的邮箱tmaic@126.com

  • 雨夜带刀说道:

    @tmaic
    可以下的啊

  • frank说道:

    请问easyDialog弹出层能否跟随元素的name来定位呢?

  • 雨夜带刀说道:

    @frank
    easyDialog的定位需要依赖DOM元素,而你說的name只是元素的一个属性,你可以通过属性选择器查找到这个元素就行了。

  • mfy说道:

    同样发现了的ie8下js错误: 尚未实现 easydialog.min.js 。 位置:行 10 字符 6
    换用easydialog.js也一样

  • mfy说道:

    发现临时性解决方法:
    http://blog.sina.com.cn/s/blog_69fe22cb0100o9jy.html
    IE下还要注意逗号的问题….

  • Cason说道:

    关闭 没有太严谨。请开发者 加以修改。easyDialog.close(time) time单位毫秒
    close: function(val) { (!val) ? this.close1() : setTimeout(this.close1, val);
    },
    close1: function(){
    var a = e.data(“options”),
    b = e.data(“dialogElements”),
    c = e.event;
    r && (clearTimeout(r), r = o);
    if (a.overlay && b.overlay) b.overlay.style.display = “none”;
    b.dialogBox.style.display = “none”;
    q && b.dialogBox.style.removeExpression(“top”);
    b.closeBtn && c.unbind(b.closeBtn, “click”);
    b.dialogTitle && c.unbind(b.dialogTitle, “mousedown”);
    b.dialogYesBtn && c.unbind(b.dialogYesBtn, “click”);
    b.dialogNoBtn && c.unbind(b.dialogNoBtn, “click”); ! a.follow && !a.fixed && (b = e.data(“resize”), c.unbind(j, “resize”, b), e.removeData(“resize”));
    a.lock || c.unbind(d, “keyup”, u);
    typeof a.callback === “function” && a.callback.call(v);
    e.removeData(“options”);
    e.removeData(“dialogElements”)
    },
    //我觉得挺实用 因为有时候不想再次提交但是不想让窗口马上关闭;easyDialog.offyesBtn和easyDialog.onyesBtn; offyesBtn: function() {
    d.getElementById(“easyDialogYesBtn”).disabled = true;
    },
    onyesBtn: function() {
    d.getElementById(“easyDialogYesBtn”).disabled = false;
    增加 宽度高度自定义:
    easyDialog.open({
    container : {
    header : ”,
    content :””,
    iw :300,
    ih :200,
    yesFn :true,
    noFn : true
    }
    });

    createDialogWrap: function(a) {
    var iw = ( !! a.iw) ? “width:” + a.iw + “”: “”;
    if ( !! iw && !!a.ih) {
    var ih = ( !! a.ih) ? “;height:” + a.ih + “”: “”;
    };
    var b = typeof a.yesFn === “function” ? ” + (typeof a.yesText === “string” ? a.yesText: “\u786e\u5b9a”) + “”: “”,
    c = typeof a.noFn === “function” || a.noFn === !0 ? ” + (typeof a.noText === “string” ? a.noText: “\u53d6\u6d88”) + “”: “”,
    a = [”, a.header ? ‘ב + a.header + “”: “”, ” + a.content + “”, b === “” && c === “” ? “”: ” + c + b + “”, “”].join(“”),
    b = d.getElementById(“easyDialogWrapper”);
    if (!b) b = d.createElement(“div”),
    b.id = “easyDialogWrapper”,
    b.className = “easyDialog_wrapper”;
    b.innerHTML = a.replace(//ig, “”);
    return b

  • 雨夜带刀说道:

    @Cason
    十分感谢你的意见,我会在后续的版本中改进。

  • welpher.yu说道:

    哈,我拿来项目里用了哈

  • arik说道:

    弹出层的div内容很长的话,有没有办法自动出现一个滚动条?

  • 雨夜带刀说道:

    @arik
    内容过长,可以自己修改内容容器的样式固定一个高度然后设置overflow:auto即可。

  • 阿皮说道:

    使用了follow属性用于跟随定位的时候,当缩小浏览器窗口时弹出层并不会跟随着它跟随的元素移动,请问应该要怎么解决呢?

  • 雨夜带刀说道:

    @阿皮
    谢谢你的反馈,该问题已修复,请下载最新的文件。

  • 李杰说道:

    挺不错的 就是好像不能ajax获取页面内容?

  • 雨夜带刀说道:

    @李杰
    ajax和弹出层的逻辑没关系。

  • […] 另一个简单实用的弹出层组件–easyDialog:http://stylechen.com/easydialog-v2.0.html […]

  • semdy说道:

    挺不错的,好像没有iframe和ajax显示页面内容的功能

  • alex说道:

    在IE9下无法无法实现遮层效果,也没法居中。
    我的页面是frame结构,要弹出的是个由table包住的内容。

  • 雨夜带刀说道:

    @alex
    frame太古老了,没测试过。

  • hi说道:

    请问如何使用easydialog弹出包含 iframe的层
    并且在iframe中如何触发关闭dialog。

    谢谢。。。

    我目前的思路是

    ajax({
    ……….
    ……….
    if(success)
    {
    $(‘#iframe’).html(‘xxx’);
    easyDialog.open({
    container : ‘iframe’,
    });
    }
    });

    由ajax回传一个包含iframe的页面,因为我没写js表单验证(太懒了,因为后端无论如何都是要做参数验证的,想省掉一步),都是通过程序验证再回填回来的。所以需要iframe。

    请问思路对吗,再者我不知如何在iframe中调用参数关闭dialog。请教了谢谢。

  • hi说道:

    接上,wordpress把div那一行内容正则掉了。。。

    div id=’iframe’ display=none

  • 雨夜带刀说道:

    @hi
    要关闭顶级页面的弹出层,带上命名空间就行了。
    window.top.easyDialog.close();

  • hi说道:

    谢谢了

  • jason说道:

    先谢谢了 lz!! 但是有两个问题 1. ie6下面的遮罩层 一半可以 一半不可以?知道原因吗?2.我弹出的框 遮罩层不能滚动 如何设置?

  • 雨夜带刀说道:

    @jason
    检查下doctype是否设置标准。

  • lj说道:

    给你提个意见啊 content中加一个可以直接填写地址 比如
    url:http:www.baidu.com
    iframe:http:template/demo.html

    这样 会感觉用起来很方便

  • 华仔说道:

    不错很喜欢!

  • 康仔说道:

    自定义弹出层 如果不设置自动关闭时间 是否能在右上角有个关闭按钮

  • harry说道:

    求助啊
    在关闭的时候, 有时候提示 options.overlay && elements.overlay 这个地方 提示 options undefined, 这个是偶尔提示的, 弹出曾没问题, 就是有时候 这个地方报错,关闭不了,

  • 雨夜带刀说道:

    @harry
    以前没出现过这种问题,你可以将你使用的情况还原成DEMO页面,发邮件给我看看。

  • wozuozhu说道:

    使用自定义层时,为什么serialize()获取不到弹出层里面的表单值?请高手指点一下….

  • 雨夜带刀说道:

    @wozuozhu
    这跟弹出层应该没啥关系吧。

  • 唐@@说道:

    是否收费?

  • 雨夜带刀说道:

    @唐@@
    免费开源。

  • VIVI说道:

    弹出自定义层,怎么关闭?

  • silva说道:

    您插件在ie6下背景不透明,全白色,该怎么解决呢,求指导……
    测试工具ietester 0.4.11
    其他浏览器都完美运行.

  • […] if(top != window) {top.location.href = window.location.href;} 3)在看easyDialog时,在判断dom树加载是否完成的函数中,使用的是 window.frameElement != null […]

  • 夜落朦空说道:

    还有更新吗?

  • 009说道:

    代码不错赞一个,遗憾的是弹出的层没有iframe功能。

  • […] 来源:stylechen.com 作者:雨夜带刀 代码整理:懒人图库 […]

  • coding说道:

    IE7下,弹出对话框会变得层宽直接到浏览器右侧滚动条。我仔细检查了几次,觉得应当是最外层容器的问题,但是目前还是没办法解决,不知道Lz有遇到过这种反馈吗

  • coding说道:

    找到原因了,忽略我的上条些的

  • coding说道:

    http://zhidao.baidu.com/question/507467394.html.
    看来遇到这个问题的不只是一个人。目前还不知道怎么解决这个问题。

  • […] 可以看下这个插件easyDialog,效果和blockui差不多,但是可以拖动下面是演示http://stylechen.com/wp-content/uploads/demo/easydialog-v2.0/index.html以及一个关于这个的文章:在此感谢该文作者分享。http://stylechen.com/easydialog.htmlhttp://stylechen.com/easydialog-v2.0.html […]

  • sgt说道:

    请问一下哦,
    想要实现——单击遮罩层可以关闭弹出层,
    在BlockUI里面是,
    $(‘.blockOverlay’).attr(‘title’,’单击关闭’).click($.unblockUI);
    在easyDialog里面,
    可以实现吗,有专门的参数设置吗?

  • 崔崔说道:

    @雨夜带刀 为什么自定义的拖拽功能没有效果呢?
    $(‘demoBtn1’).onclick = function(){
    easyDialog.open({
    container : ‘testBox’,
    drag : false
    });
    };

  • hi~boy说道:

    你好!可以问你一个问题不?
    PS:就是如果我把运行去掉 —— 实现页面打开时自动弹出的效果,好像在IE7以下不可以呀?求解惑~~

  • 雨夜带刀说道:

    @hi~boy
    可以将弹出层绑定在window.onload事件中。

  • 雨夜带刀说道:

    @崔崔
    你的darg设置成了false,需要拖拽功能要设置成true。

  • 辰辰说道:

    插件是不是不能通过class来触发事件。只能用id吗?如果想多个class来触发弹窗怎么办呢?

  • 雨夜带刀说道:

    @辰辰
    插件和触发事件是没有关系的,你可以给多个元素绑定一个相同的事件,该事件就可以调用 easyDialog.open 来触发弹窗。

  • iweisi说道:

    请教能否同时弹出多个弹窗呢?现在是只能有一个弹窗

  • 雨夜带刀说道:

    @iweisi
    不能。

  • […] 8月30日更新至2.0:http://stylechen.com/easydialog-v2-0.html […]

  • aahyhaa说道:

    弹框是否有扁平版的呢,现在扁平越来越流行了,强烈建议作者出一个扁平版的弹框。

  • 雨夜带刀说道:

    @aahyhaa
    新版的dialog已整合到easy.js的组件库中,同时在ecope项目中也有对应的jQuery版本。easy.js组件库ecope组件库

  • objectboy说道:

    给您提个建议:
    假如我现在把弹出层打开,设置弹出层在5秒后关闭,是应该在鼠标移开弹出层之后才关闭,而不是从弹出层弹出那一刻开始5秒后就关闭,你现在的情况是鼠标放在弹出层上一样也关闭啦,这样好像不太符合逻辑。。。您觉得呢? 就像qtip一样。。。

  • 雨夜带刀说道:

    @objectboy
    这个可以自己加一个定时器就轻松实现了。

  • hellokitty说道:

    你的那个easyDialog,在下面右键的时候,移动鼠标就会跟着跑,拖动组件有点问题吧

  • web说道:

    为什么明明引入了easyDialog.js
    但是在
    $(document).ready(function(){
    easyDialog.open({
    container : {
    header : ‘系统提示’,
    content : ‘系统提示’,
    yesFn : true,
    noFn : true
    }
    });

    });
    中,firebug还提示我easyDialog is not defined

  • 相濡以沫说道:

    为什么用弹出原本存在的层的时候不存在关闭的按钮

  • 华生说道:

    这个项目还在维护吗

  • 非分之想说道:

    怎么样让弹出框出现在右下角而不是居中

  • Mure说道:

    ie8 实现弹出后,点击确定,好像没有触发到回调函数

  • 826877189说道:

    function delroles(rolesid){
    easyDialog.open({
    container : {
    content : ‘删除角色之后,将不能恢复,确认删除?’,
    yesFn : btnFn(rolesid),
    noFn : true
    },
    fixed : false
    });
    };

    function btnFn(rolesid){
    $.get(‘__URL__/delrole’,{‘roleid’:rolesid},function(json){
    var status = json.status;
    if(status ==1){
    alert(json.info);
    $(“.table-bordered”).load(location.href+” .table-bordered”);
    }else{
    alart(“删除遇到错误!”);
    $(“.table-bordered”).load(location.href+” .table-bordered”);
    };
    });
    };
    bug 给btnFn加值后 不用确定直接就执行了

  • why说道:

    easyDialog 的设计存在问题。
    easyDialog 为什么要依赖 window.onload?为什么不能在引入 easydialog.js 之后就可以执行 easyDialog.open?

    假设我要对其二次封装
    window.Confirm = function (caption, content, yesCallback)
    {
    easyDialog.open({
    container : {
    header : caption,
    content : content,
    yesFn : function(){
    typeof yesCallback === ‘function’ && yesCallback();
    },
    noFn : true
    }
    });
    }

    之后在
    $(function(){
    $(‘div’).on(‘click’, function(){
    Confirm(“title”, “content”, function(){alert(“callback”)});
    });
    });
    这样是无法成功执行的,因为在 jquery 绑定事件时,window.onload 还未执行。这使得所有调用 Confirm 的地方都必须依赖于 window.onload。

    冲着所谓的轻量级 js dialog,实际用起来问题多多。用 id 来绑定模板的元素,导致只能有一个对话框实例,第二个对话框会冲掉第一个对话框。所以无法实现二级对话框。如果把它作为一个弹出层对话框容器(内嵌表单,用 ajax 提交数据,并用对话框提示处理结果)使用,这意味着在提示处理结果时,你不得不使用另外一套 js dialog 实现,这是不是很搞笑。