jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 33064  239  查看评论 (145)
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插件简易
  弹出层
 17478  32

jQuery仿QQ登录表单弹出窗

jQuery仿QQ登录表单弹出窗口效果源码
  弹出层
 17163  96

简洁易用的弹框插件simpleAlert

simpleAlert是一款简洁易用的弹框插件,小巧性能好,兼容IE6以上(包括IE6)的浏览器。
  弹出层
 5087  14

jQuery弹出层插件LIGHTBOX

这款lightbox,可应用于图片、swf文件、html文件等等.
  弹出层
 39598  191

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

    DeweyLiu 0
    2017/9/29 13:52:55

    不知为何右上角没有关闭按钮

        cylansd0
        2017/10/17 20:29:24

        可以检查下是否样式和其他的插件存在冲突?

    回复
    my Joy is with everyone 0
    2017/9/26 18:25:05

    版主 报Mustache is not defined 怎么解决

        cylansd0
        2017/9/26 18:37:23

        引用lib目录mustache.js 即可。 

        或者直接引用zeroModal.min.js  (已包含mustache.js)

    回复
    天灬籁 0
    2017/8/30 15:08:14

    请教楼主,我的问题是直接用alert是可以弹出提示框的,但是换用zeroModal.alert就没有提示框直接关闭了.请教楼主怎么解决呢?同一个项目其他地方用alert没问题,只是在iframe里面使用这个弹出层就不灵了.

        cylansd1
        2017/8/30 17:26:22

        建议注释一些其他的JS, 看是否是其他JS代码导致的;或者按F12看看有没有出错 以及Elements里面有没有动态添加上zeroModal的元素

    回复
    空瓶子 0
    2017/8/8 13:35:25

    疑问:当引用本地下载jquery时,提示jQuery is not defined. 

    <script src="./jquery-3.2.1.min.js"></script>    //路径是对的

    而引用官网上的jquery时,demo就能顺利执行  

    请问,这是什么原因导致的呢?

        空瓶子0
        2017/8/8 13:48:08

        解决了,才发现是html中的引用顺序不对

    回复
    追风 0
    2017/8/1 10:59:41

     zeroModal.loading(),在谷歌下 调用,等数据加载完调用zeroModal.closeAll(),zeroModal.loading()就不出现了。火狐是正常出现关闭的

        cylansd0
        2017/8/1 11:14:16

        需要把代码贴出来看一下  好定位下问题

        追风0
        2017/8/2 15:08:09
        var loadUniqe = zeroModal.loading(2);
        var subsystemid = $('.col').attr('data-id'),
            name = $('.sou').val(),
            learnstatus = '',
            userid = '',
            gradeid = $('.ztfalg').attr('grade-id'),
            trainid = $('.ztnameon').attr('datazt-id');
        if (typeof(gradeid) == 'undefined') {
            gradeid = '';
        }
        if (typeof(subsystemid) == 'undefined') {
            subsystemid = '';
        }
        $.ajax({
                    url: host + '/api/query/getuserstudystats',
                    type: 'post',
                    async: false,
                    data: {
                        subsystemid: subsystemid,
                        name: name,
                        learnstatus: learnstatus,
                        userid: userid,
                        gradeid: gradeid,
                        trainid: trainid,
                        pagesize: pagesize,
                        pageindex: pageindex
                    },
                    dataType: "json",
                    success: function(data) {
                            zeroModal.close(loadUniqe);
    回复
    老伙伴记得哥们儿 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
        });

        就可以了

    回复
取消回复