jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 101793  636  查看评论 (223)
分享到微信朋友圈
X
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网站功能介绍步骤

网站功能介绍步骤,可以引导用户该怎么操作,或者应该做什么
  弹出层
 39535  453

jQuery弹出层插件gallery

这是一个图片弹出层
  弹出层
 39173  348

jquery鼠标悬停滑动切换特效

jquery鼠标悬停滑动切换特效
  弹出层
 33543  387

jQuery弹出层插件(原创)

简约的jQuery弹出层插件
  弹出层
 27164  244

讨论这个项目(223)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Eternity 0
    2022/3/15 16:56:41
    $("#examCenter-link, #mineCenter-link").click(function() {
    //判断是否登录
    var studetnId = $(this).attr("studentId");
    if(studetnId.trim() == "" || studetnId == null) {
    zeroModal.show({
    title: "提示",
    content: "登录后才能查看",
    width : '200px',
    height : '130px',
    overlay : false, /* 是否需要显示遮罩层,默认true */
    ok : true,
    onClosed : function() { /* 弹出层关闭后事件 */
    location.reload();
    }
    });
    return false;
    }
    });
    代码是这样的 但是弹出框确认键乱码怎么解决,下载的版本是最新的插件而且格式都是UTF-8 求大佬帮忙解决 感谢🌹 回复
    时间、冲淡了我们的回忆‖ 0
    2020/6/9 9:20:50
    您好,请问咱们这个模态,我用的是模态选项,页面有表单,这个模态是为了表单提交用,按钮是自定义的,但是模态框弹出后,页面的input或者是textarea都是无法输入的状态,请问是怎么回事,用的IE11,谷歌是正常的 回复
    神的境界 0
    2019/9/17 9:29:51
    用requirejs引入,但是在调用zeroModal时发现未定义,但是我看js文件已经是加载了,这是什么问题 回复
    hxcheng 0
    2019/6/19 2:32:37

    请问“确认“按钮出现乱码如何解决
    这是部分代码

    if (studetnId.trim() == "" || studetnId == null) {
        zeroModal.show({
            title: "提示",
            content: "请先登录",
            width: '200px',
            height: '130px',
            overlay: false,
            ok: true,
            onClosed: function() {
                location.reload();
            }
        });
        return false;
    }
    });
        cylansd0
        2019/6/19 9:14:08
        可以看下zeroModal文件里面是不是乱码,或者检查html页面是不是字符设置的UTF-8 ,
        或者检查下<script src="../../**.js" charset="utf-8" type="text/javascript">
    回复
    酸酸的橙子 0
    2019/5/27 12:01:23
    请问,如果一个页面多个不同类型弹窗,如何让每个按钮能够对应上弹窗,layui是给按钮设置个id,弹窗elem:"id",这个插件该怎么做呢?
        酸酸的橙子0
        2019/5/27 13:50:16
        补充一下:一个页面多个弹窗,怎么对应显示
        酸酸的橙子0
        2019/5/27 14:07:24

        例如:

        <a class="table-btn font-blue" href="javascript:_()" id="popup1">查看详情</a>
        <a class="table-btn font-blue" href="javascript:_()" id="popup2">重新调配</a>

        我该怎么写2个弹窗分别对应上面两个按钮

        <script type="text/javascript">
        function _() {
                zeroModal.show({
                    title: '第一个弹窗',
                    : true,
                    url: 'first.html',
                    width: '500px',
                    height: '600px',
                   
                });
            }
            
        </script>
        cylansd1
        2019/5/28 9:34:17
        <a class="table-btn font-blue" href="javascript:_()" id="popup1">查看详情</a>
        <a class="table-btn font-blue" href="javascript:_()" id="popup2">重新调配</a>
        function _(e) {
            var target = $(e.currentTarget);
            var id = target.attr('id');
            console.log('~~~~~' + id); // 这样就可以根据ID区分要干的事了
            zeroModal.show({
                title: '第一个弹窗',
                : true,
                url: 'first.html',
                width: '500px',
                height: '600px',
        
            });
        }
    回复
    雨后的阳光、 0
    2019/4/22 14:34:58
    我在嵌套了一个 页面,在页面自己写了一个按钮,调用zeroModal.close(),为什么关闭不了弹窗?
        cylansd1
        2019/4/22 15:17:07

        zeroModal.close() 需要传入参数,
        比如

         var key=zeroModal.show({...});

         关闭:

        zeroModal.close(key);

        不传参数就用zeroModal.closeAll();

        雨后的阳光、0
        2019/4/23 15:19:23
        好的,感谢!
        雨后的阳光、0
        2019/4/23 15:36:50
        <div class="btn-box">
            <button onclick="zeroModal.closeAll()">取消</button>
        </div>

        我是在页面里面直接这么写的,但是好像没反应关不掉,但是页面上面也没有报错。

    回复
    niu 0
    2019/4/12 15:18:26
    i哎呀 0
    2019/3/28 15:05:45
    怎么可以多开窗口呢 回复
    往后余生 0
    2019/1/14 10:04:28
    作者你好 请问一下 zeroModal.alert好像不能和location一起用 一起写的话直接就执行location 怎么才能让他俩一起用啊 单独用alert和location就可以先alert再location
        cylansd1
        2019/1/14 11:04:00
        zeroModal.alert({
           //title: '提示',
           content: '点击确定进入下一页面',
           cancel: true,
           ok: true,
           okFn: function() {
                location.href="http://www.baidu.com";
           }
        });
    回复
    云淡风轻 0
    2018/11/29 9:09:42
    点击确定按钮后能不能不自动关闭弹框?表单提交的弹框,点击确定不符合提交条件,不关闭弹框。
        cylansd0
        2018/11/29 9:36:58
        return false 即可
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复