jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 23427  178  查看评论 (115)
jQuery弹出层组件zeroModal ie兼容9

弹出层组件zeroModal

2016-10-28日更新

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

调用方法说明
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插件简易
  弹出层
 12304  26

原生jQuery对话框插件dialogBox

原生jQuery对话框插件dialogBox,提供初学者学习,9种类型的对话框
  弹出层
 21043  106

使用jQuery创建模态窗口登陆效果

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

js弹出层插件action-sheet

类似ios中actionsheet的弹出按钮组
  弹出层
 6992  22

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

    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;
                }
            });
        }
    回复
    ? 0
    2017/4/24 14:17:10

    我看了源码,只支持ajax 只支持get请求,不知道post 请求,我想要支持post请求,怎么破呢

        cylansd0
        2017/4/24 15:39:01

        添加了ajaxType 、ajaxData两个参数,可以在http://git.oschina.net/cylansad/zeroModal中下载最新的代码

        ?0
        2017/4/26 17:10:10

        thank you 

    回复
    ?逝的锾 0
    2017/4/21 15:05:24
    能否在这三个函数中加入自定义事件,比如提示错误后,点确定可以执行相关的代码。
    zeroModal.alert(content/opt)显示提示框
    zeroModal.error(content/opt)显示错误提示框
    zeroModal.success(content/opt)
        cylansd1
        2017/4/21 15:44:24

        // opt 是指的参数对象

        zeroModal.error({content:'123', okFn: function() { console.log('test'); }})

        ?逝的锾0
        2017/4/21 15:54:19

        谢谢!!!

    回复
    ?≡??子不语 0
    2017/4/14 16:40:32

    我使用的是Thinkphp,主html中有一个单击事件,弹出对话框,代码如下:

    function _custombutton() {
            zeroModal.show({
                title: '选择视频文件',
                iframe: true,
                url: 'Videoedit/selectvideo',
                width: '60%',
                height: '60%',
                buttons: [
                    { className: 'zeromodal-btn zeromodal-btn-primary', name: '确定', fn:selectReturn()},
                    { className: 'zeromodal-btn zeromodal-btn-default', name: '取消', fn:function(opt){ alert(2); }}
                ]
            });
        }

    子窗体是一个js树形结构,用于选择文件:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="__STATIC__/css/themes/default/style.min.css" />
        <script type="text/javascript" src="__STATIC__/js/jquery.js"></script>
        <script src="__STATIC__/js/jstree.min.js"></script>
    </head>
    <body>
        <div id="jstree"> </div>
    </body>
    <script>
        $(function() {
            $('#jstree').jstree({
                'core': {
                    'data': {
                        "url": '__URL__/roottree3',
                        "dataType": "json"
                        // needed only if you do not supply JSON headers        
                    }
                }
            });
        });
        //获取选择的文件   
        $('#jstree').on("changed.jstree", function(e, data) {
            var i, j, r = [];
            for (i = 0, j = data.selected.length; i < j; i++) {
                r.push(data.instance.get_node(data.selected[i]).id);
            }
        });
    </script>
    </html>

    请问,我怎么在点击“确定”按钮时,获取我选择的文件

        cylansd0
        2017/4/19 17:21:51

        采用iframe的方式弹出内容的话,可以参考html5 的postMessage来实现父子frame的通讯。demo:https://git.oschina.net/cylansad/postMessageDemo

        或者建议把确定按钮直接放到iframe里面的页面中,这样逻辑直接在iframe的页面处理好了

    回复
取消回复