jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 39915  273  查看评论 (175)
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弹出层关闭后事件
相关插件-弹出层

四种简单弹窗 — 自己配置弹窗

四种弹出方式,可以非常简单的通过修改css来定义自己喜欢的样式。
  弹出层
 21977  109

各种弹窗alert

jquery弹窗
  弹出层
 29608  73

响应式模态框

简洁、弹出效果好的响应式模态框,适用移动端
  弹出层
 10640  74

悬浮九宫格菜单jQuery插件

悬浮九宫格菜单jQuery插件
  弹出层
 20968  108

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

    小明 0
    2018/3/29 16:46:20
    作者你好,那个等待框怎么关闭啊,没看到有关闭的啊
        cylansd1
        2018/3/29 16:53:46
        var unique = zeroModal.loading();
        // 关闭
        zeroModal.close(unique);
        zeroModal.closeAll();
        小明0
        2018/3/29 16:54:26
        比如说我做一个请求,请求完成后,就要关闭等待模态框
        小明0
        2018/3/29 17:09:45
        可以了谢谢,
        小明0
        2018/3/30 15:03:24
        还有一个问题,就是当按回车的时候提示框不出,也不报错,只有在请求成功后才会出来,比如说我回车后我判断账号或者密码不为空,为空就弹出提示(不能弹出),都不为空的时候执行ajax请求,请求成功后弹窗(能弹出),回车是执行点击确定的那个方法,判断和执行都写在这个方法里的。是什么原因呢?
        cylansd1
        2018/4/2 16:14:06
        function doSubmit() {
            var username = $('#username').val();
            if (username === '') {
                zeroModal.alert('username is empty');
                return; // 需要return,停止往下执行
            }
        
            var _unique = zeroModal.loading();
            $.ajax({
                ...
                failure: function() {
                    zeroModal.close(_unique);
                }
                success: function() {
                    zeroModal.close(_unique);
                    // todo ...
                }
            })
        }
        
        $('#username').keyup(function(e) {
            if (e.keyCode === 13) {
                doSubmit();
            }
        });
        cylansd0
        2018/4/2 16:20:47
        写一个例子,不知道是不是你需要的?
        小明0
        2018/4/3 10:14:32
        var name = $(".username").val();
           var password = $(".password").val();
           if (name === '' || password === '') {
        
               var b = "账号或密码不能为空";
               console.log(b) /// 这里会打印b
               _alert2(b)   ///// 填了return还是不弹出
               return ;
           } else {
             这里在请求ajax;
           ajax 成功返回后调用  _alert2(e.msg);///这里会弹出来

        2,还有就是能那个成功弹窗没有回调执行函数吗?像提示框那样

        小明0
        2018/4/3 10:30:02
        可以说和你写的例子一样,就是不弹出
        小明0
        2018/4/3 10:32:53
        $(document).keydown(function(event) {
            if (event.keyCode == 13) {
                login();
            }
        });
        小明0
        2018/4/9 17:54:52
        作者你好,成功提示框确认按钮怎么没有预留事件触发
        cylansd0
        2018/4/11 8:55:21
        okFn 属性就是的
    回复
    万人眼中万个我i 0
    2018/2/9 22:36:39
    感谢楼主 可以了 我还担心不会用
    回复
    万人眼中万个我i 0
    2018/2/9 22:29:48
    zeromodal.close() 没用 回复
    万人眼中万个我i 0
    2018/2/9 21:24:08
    楼主 我在模态框写表单提交 怎么弄
    回复
    魅狐血儿 0
    2017/12/15 17:07:41

    谢谢作者,问一下需要支持到 IE7+,不知道有什么办法么

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"/>

        cylansd0
        2017/12/15 17:15:08

        。。。IE7的话,很多样式都不支持,不太适合使用这个组件。。。如果需要保证兼容性足够好的话,还是建议使用一些比较老的、实践得更多的组件比较稳妥点,可以考虑比较完善的extjs、或者轻量级的colorbox

        魅狐血儿0
        2017/12/15 17:45:58

        感谢~~感谢~~

    回复
    魅狐血儿 0
    2017/12/15 16:40:39

    包都导过了

        cylansd0
        2017/12/15 16:42:18

        目前只支持IE10或以上

        魅狐血儿0
        2017/12/15 16:55:03

        谢谢作者,问一下需要支持到 IE7+,不知道有什么办法么

        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"/>

        cylansd0
        2017/12/15 17:10:41

        。。。IE7的话,很多样式都不支持,不太适合使用这个组件

    回复
    魅狐血儿 0
    2017/12/15 16:36:23
    Dream knight 0
    2017/12/5 15:38:24

    为什么我引用完刚点击按钮是好使的,但马上弹框就消失了,像闪现了一下就没了

        cylansd0
        2017/12/5 15:54:34

        建议先去掉引用的其他的JS,看看是否是和其他的JS 存在冲突?

    回复
    Sion2017 0
    2017/12/1 17:48:31
    作者你好,有个问题就是transition设置为true一样没有动画,transition:true 
        cylansd0
        2017/12/5 15:43:07
        出场动画效果,之前去掉了,   后期会再补上去
    回复
    天尊 0
    2017/11/24 21:41:44

    之前提问的窗口等比例缩放的问题。我已经知道如何解决了。看了源码,其实height与width主要在于百分比设置,而不是固定px。 插件很不错。我觉得比layer要好用,轻量级。layer如果出现了样式冲突,太难找了。网上找到你这个插件还是不错的,赞一个!你这个插件在开源中国上的地址是什么?

        cylansd0
        2017/11/25 9:55:46

        谢谢你的称赞 ^___^ ,地址是:https://gitee.com/cylansad/zeroModal   不过插件目前已经比较稳定,最近没做过什么更新了

    回复
取消回复