jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 27380  206  查看评论 (131)
jQuery弹出层组件zeroModal ie兼容9

弹出层组件zeroModal

2017-5-26日更新

支持弹出常用的模态框,及操作提示框、操作等待层等。

调用方法说明
zeroModal.show(opt)显示普通的模态框,opt为参数对象,参数内容请参考下面的列表
zeroModal.close()关闭模态框
zeroModal.closeAll()关闭全部模态框
zeroModal.loading(type)显示等待框,type为显示等待的类型,目前提供的值为(1、2)
zeroModal.alert(content/opt)显示提示框
zeroModal.error(content/opt)显示错误提示框
zeroModal.success(content/opt)显示正确提示框
zeroModal.confirm(content/opt, okFn)显示确认框

使用请参考index.html提供的demo

参数说明

参数名说明
title标题
content显示内容
url如果输入url,将会根据url返回的内容显示在弹出层中
iframe是否需要嵌入iframe,默认false,该参数需要和url一起使用
width宽度(px、pt、%)
height高度(px、pt、%)
transition是否需要出场动画,默认false
overlay是否需要显示遮罩层,默认true
overlayClose是否允许点击遮罩层直接关闭弹出层,默认
ok是否启用“ok”按钮,默认false
okTitle“ok”按钮的显示值,默认为“确定”
okFn点击“ok”按钮触发的事件
cancel是否启用“cancel”按钮,默认false
cancelTitle“cancel”按钮的显示值,默认为“取消”
cancelFn点击“cancel”按钮触发的事件
esc是否需要按esc键退出弹出层,默认false
onOpen弹出层弹开前事件
onLoad弹出层加载显示内容前事件
onComplete弹出层加载显示内容后事件
onCleanup弹出层关闭前事件
onClosed弹出层关闭后事件
相关插件-弹出层

jQuery弹出层插件Moa Modal

Moa Modal是一个jquery插件,提供了9种弹出层效果兼容性还可以支持ie6以上版本浏览器.
  弹出层
 42016  141

超酷的模态框效果 - Nifty

Nifty Modal Window Effects是一个CSS3实现的模态框,包含多种方式弹出效果。
  弹出层
 26075  171

loading遮罩插件jquery.mloading

超实用的加载样式,为jquery element增加loading遮罩效果,jquery.watercolor.js简易版
  弹出层
 11458  29

jquery弹出谈话框适配移动端

jquery提示谈话框,用于提示信息,有六种提示效果
  弹出层
 14882  84

讨论这个项目(131)回答他人问题或分享插件使用方法奖励jQ币

    老伙伴记得哥们儿 0
    2017/7/13 15:58:27

    为什么出现:zeroModal is not defined

        cylansd0
        2017/7/17 8:52:17

        是不是页面里面没有引入?

    回复
    Pig Star 0
    2017/6/29 14:33:09
    很棒的插件!很厉害~~ 回复
    Sterben 0
    2017/6/22 14:44:41

    作者,你好!    我想请问下,如果点击弹出框的确定按钮以后,需要有loading的样子来等待数据的交互,这个时候,假如数据处理完毕了,我想关闭loading那个,需要怎么做

        cylansd1
        2017/6/22 15:19:01
        var loadUniqe;
        zeroModal.show({
            content: '...',
            okFn: function() {
                loadUniqe = zeroModal.loading();
                doSomething();
            }
        });
        function doSomething() {
            zeroModal.close(loadUniqe); // 关闭等待框
            //zeroModal.closeAll();// 关闭所有遮罩层
        }
        Sterben0
        2017/6/22 15:43:58

        谢谢!

    回复
    sniffs岁月 0
    2017/6/2 11:31:32

    你好。第二次弹窗的时候第二个窗口不能拖拽到第一个的外面,有解决的方法吗

        cylansd0
        2017/6/2 12:27:45

        第一个弹窗是设置的iframe,  第二个弹框是在iframe里面的页面里面弹出的吗?

        sniffs岁月0
        2017/6/2 13:38:38
        是的,不能拖拽到第一弹窗的外面
        sniffs岁月0
        2017/6/2 13:40:41

        不能过界

        cylansd0
        2017/6/2 16:47:46

        本身iframe里面的页面和iframe的页面是相互独立的。

        不过可以建议在子页面里面是有 parent.zeroModel.show....

        sniffs岁月0
        2017/6/2 17:31:18

        感谢作者

    回复
    无敌小黄色 0
    2017/5/26 11:58:53
    作者你好,我使用的时候发现成功提示中或者confirm中的ok属性没有生效,请问是什么原因呢?我就是想隐藏这个按钮。
        cylansd0
        2017/5/26 15:20:35

        代码升级到最新, 调用

        zeroModal.success({
          content: '操作成功',
          ok: false
        });

        就可以了

    回复
    tzl500wan 0
    2017/5/17 16:21:08
    您好,码云上面,我看了你上传的新版js,里面有个Mustache变量,在哪里定义的?引入zeroModal.js还需要引入其它js支持么?
        cylansd0
        2017/5/17 16:52:45

        在lib目录下面的 mustache.js,

        zeroModal.min.js中已经包含进去了

    回复
    sniffs岁月 0
    2017/5/17 10:57:49

    请问回调函数在zeroModal.js哪里体现?

        cylansd0
        2017/5/17 11:31:57

        目前提供了这些事件

        onOpen弹出层弹开前事件
        onLoad弹出层加载显示内容前事件
        onComplete弹出层加载显示内容后事件
        onCleanup弹出层关闭前事件
        onClosed弹出层关闭后事件
    回复
    唯壹丶 0
    2017/5/15 10:35:51
    zeroModal.success ();

    这个成功提示框怎么自动就消失了,应该是点了确定后才消失不是吗?

        cylansd0
        2017/5/15 10:55:59

        是的, 需要检查是否被被其他插件冲突了,或者是 弹出层被其他元素遮挡住了?

        你可以搜下_tmp_last_zindex属性,就是指的z-index值,可以再加大点试试

    回复
    笨笨的猪 0
    2017/5/14 0:32:05

    请问confirm弹出框的大小在哪设置呢

        cylansd0
        2017/5/15 8:46:21
        zeroModal.confirm({
            content: '确定提交审核吗?',
            contentDetail: '提交后将不能进行修改。',
            okFn: function() {
                alert('ok');
            },
            cancelFn: function() {
                alert('cancel');
            },
            width: '400px',
            height: '300px'
        });
        笨笨的猪0
        2017/5/23 15:44:37

        作者大大真给力,又遇到了问题,请教一下弹出动画怎样才能改成淡入淡出

        cylansd1
        2017/6/27 12:50:07

        不好意思才看到。目前组件不能直接支持这个效果。不过你可以自己修改源码实现。

        1.先确认zeroModal是最新的;

        2.第35行,定义的模板加上隐藏属性;

            var _zero_modal_template = '<div zero-unique-container="{{unique}}" class="zeromodal-container" style="display:none;  ......

        2.第537行下面,添加  $('[zero-unique-container="' + opt.unique + '"]').fadeIn();

        即可实现淡入。

        淡出的效果,直接修改446行_close函数即可

        笨笨的猪0
        2017/7/3 22:32:46
        十分感谢
    回复
    Denzel 0
    2017/5/10 0:44:49
    跪求作者  添加  禁用滚动条 参数!!!弹出层 弹出的时候 怒能滚动。。。跪求!!
        cylansd0
        2017/5/10 8:58:18

        你是指的弹出层里面的滚动条  还是外面body上的滚动条?

        Denzel0
        2017/5/10 9:59:54

        外面body的 

        cylansd0
        2017/5/10 10:26:32

        http://git.oschina.net/cylansad/zeroModal    升级到最新,使用forbidBodyScroll属性来控制

    回复
取消回复