jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 25624  187  查看评论 (126)
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创建模态窗口登陆效果

何利用jQuery插件leanModal建立一个常规模态窗口。如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当方便,还能自行添加CSS,达到自定义的效果。
  弹出层
 40838  63

BootStrap Modal和Tab 插件封装(原创)

BootStrap Modal 和 Tab 的JQ封装 封装成控件方便使用,不用再写一堆div和css
  弹出层
 657  12

jQuery SimplePop

一款可替代原生弹出框的插件,包括alert,confirm,prompt,并且可高度自定义
  弹出层
 14564  49

JQUERY弹出层 三种弹出效果

jQuery弹出层 三种弹出效果 以侧试各个浏览器兼容都OK.
  弹出层
 183327  167

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

    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

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

    回复
    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属性来控制

    回复
    谁谁哪小谁 0
    2017/5/8 10:22:48

    你好 我在title字符串中添加了“<input type="text" />” 旧版还好 最新版就不能显示标签了 而是输出了字符串 请问是修改了吗? 我需要这个功能的话怎么办 只能修改源码吗? 我看了最新版的源码 但不太会改。。 谢谢

        cylansd0
        2017/5/8 10:36:34

        这个问题已经修复了,需要再升级到最新。  http://git.oschina.net/cylansad/zeroModal

        谁谁哪小谁0
        2017/5/8 14:44:20
        谢谢!刚试了下没问题了  顺便问下作者不回复开源中国上的私信的吗? 主要就是回复这个网站么
        cylansd0
        2017/5/8 15:40:50

        如果发现了问题都会回复和解决的  :)

    回复
    dkkwhdq 0
    2017/4/29 23:31:49

    我现在有一个超链接

    <a href="${pageContext.request.contextPath }/test/delete.html" title="删除" onclick="return deleteEvent();">删除</a>

    调用了deleteEvent();这个函数,在这个函数里面使用了你的插件,如下:

    function deleteEvent() {
    
        zeroModal.confirm({
            content: '确定要删除吗?',
            contentDetail: '删除后将永远消失',
            okFn: function() {
                return false;
            },
            cancelFn: function() {
                return false;
            }
        });
    }

    无论我在okFn: function() {}内或者cancelFn: function(){}内怎样return,都会去执行那个链接去删除。没法选择,秒删。

    我想要的效果是,点击确定后再删,点击取消就不执行任何操作。怎么办?

        cylansd0
        2017/5/3 19:47:18
        <a href="javascript:void(0);" title="删除" onclick="deleteEvent();">删除</a>
        function deleteEvent() { 
            zeroModal.confirm({
                content: '确定要删除吗?',
                contentDetail: '删除后将永远消失',
                okFn: function() {
                    // TODO 删除
                    /*$.ajax({
                        ...
                    })*/
                },
                cancelFn: function() {
                    return false;
                }
            });
        }
    回复
取消回复