jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 21596  163  查看评论 (95)
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弹出层关闭后事件



相关插件-弹出层

bootstrap modal对话框

扩展自原生的Bootstrap对话框并提供一些额外的功能。 它引入一个ModalManager类,能够在屏幕后处理多个模态对话框,通过监听他们的事件实现。
  弹出层
 23425  56

easyDialog 简单、实用的弹出层组件

easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。
  弹出层
 17375  80

jQuery弹出层插件Moa Modal

Moa Modal是一个jquery插件,提供了9种弹出层效果兼容性还可以支持ie6以上版本浏览器.
  弹出层
 36177  131

jQuery仿jq22下载按钮弹框

简单jQuer弹出层插件,可拖拽以及限制拖拽范围
  弹出层
 5360  17

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

    ? 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/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的页面处理好了

    回复
    - -! 0
    2017/4/10 12:02:36

    在做新增一行这种需求时,不想使用滚动条,需要增加弹出框的高度,这个现在支持么,需要怎么写呢

        - -!0
        2017/4/10 12:16:04
        $(".zeromodal-container").css("height", $(".zeromodal-container").height() + 50);
        $(".zeromodal-body").css("height", $(".zeromodal-body").height() + 50);

         通过这种方式可以达到效果,但是有支持的方法?

        cylansd0
        2017/4/10 18:58:47

        用 zeroModal.show({ width:'??px' }) 的时候,直接加大点不行吗?

        - -!0
        2017/4/11 17:36:59

        不行,元数据这种不能限制录入的行数,其实我说的效果就是一个自适应高度的手动执行方法。

    回复
    netSharks 0
    2017/3/31 10:23:58

    我在ajax中调用确认提示框,为什么会闪退呢,我复写了zeromodal的success方法

    jQuery.Gui = {
    	promptSuccess:function(successInfo,menuNo){
    		zeroModal.success({
    			content:successInfo,
    			onClosed:function(){
    				//if(menuNo!="" && menuNo!=null && menuNo!=undefined && menuNo!="undefined"){
    				closeParentTabStrip(menuNo);
    				//}
    			}
    		});
    	},
    	promptFailure:function(failureInfo){
    		zeroModal.error({
    			content:'失败!</br>'+'<li class="forgetpassword-reserve">失败原因:'+failureInfo+'</li>'
    			
    		});
    	},
    	promptError:function(){
    		zeroModal.error({
    			content:'异常!'
    			
    		});
    	}
    };

    然后是这么调用的

    $.ajax({
      			type : "post",
      			url : serverUrl+serviceInfo.F04044052.url,
      			async : true,
      			data : JSON.stringify(paramJson),
      			dataType : "json",
      			contentType:"application/json",
      			success : function(data) {
      				if(data && "0"===data.resCode ){
      						$.Gui.promptSuccess(data.resMsg)
    
      				}else{
      					if(data && data.resMsg != undefined ){
      						
      					}else{
      					}
      				}
      			},
      			error : function() {
      			}
      		});
        cylansd0
        2017/3/31 10:44:25

        初步看没有发现问题,会不会因为其他插件导致的?

        netSharks0
        2017/3/31 11:05:04
        不清楚,就是提示框没显示出来,但是调用了其中的方法
    回复
    宏憬 0
    2017/3/30 15:35:47

    你好,弹出之后,输入一些内容,点击确定之后,能在父页面上,把内容给获取出来吗?怎么获取的

        cylansd0
        2017/3/30 15:42:20
        可以通过使用parentokFn: function () {      parent.window.对象名 = 当前页面输入的字内容}
        宏憬0
        2017/3/30 21:29:59

        子页面写了你说的这个方法,点击 确认事件的时候没反应,不会执行到 parentokFn,有什么条件吗?

        宏憬0
        2017/3/30 22:21:51

        子页面的parentokFn应该怎么写,在哪个事件里面?父页面我是用了iframe的

        cylansd0
        2017/3/31 10:42:46

        http://git.oschina.net/cylansad/postMessageDemo     可以参考在这个DEMO 实现

    回复
    tkduduxiong 0
    2017/3/28 12:41:55

    作者您好, 请问点击OK按钮后能不关闭窗口吗, 还需要做一些表单判断, 

    /*弹出层*/
    window.parent.OpenWindows({
        title: "个人中心",
        iframe: true,
        url: '@Url.Action("UserEditPassword")',
        width: '600px',
        height: '700px',
        transition: true,
        overlayClose: true,
        esc: true,
        //确定按钮
        ok: true,
        //关闭按钮
        cancel: true,
        okFn: function() {
            alert('OK');
        }
    })
        tkduduxiong0
        2017/3/28 12:43:06
        function OpenWindows(opt) {
          zeroModal.show(opt);
        }
        cylansd0
        2017/3/28 12:45:34
        okFn: function () {
          alert('OK');
            return false;
        }
        tkduduxiong0
        2017/3/29 12:19:47

        太感谢了,很完美的组件

    回复
    时间刀 0
    2017/3/23 9:12:36

    最近用大佬的插件发现一个问题。。android 机器上面显示是ok的 (我是用url的方法打开一个窗口,窗口里面是列表),结果ios机器上面窗口的底边框被列表撑爆了.....

        cylansd0
        2017/3/28 12:46:51
        ios上目前一直还没有测试过。 后续会再进行测试升级
    回复
    谁谁哪小谁 0
    2017/2/28 10:16:56

    等待框无法正常关闭   

    zeroModal.show({
            title: 'UE配置',
            content: str,
            width: '70%',
            height: '80%',
            esc: true,
            ok: 'true',
            cancel: 'true',
            onLoad: onOpenEvent,
            onComplete: onCompleteEvent
        });
        function onOpenEvent(){
        	zeroModal.loading('');
        }
        function onCompleteEvent(){
        	var unique = zeroModal.loading();
        	zeroModal.close(unique);
        }

    zeroModal.close调用后页面元素中有一个div无法删除导致页面不可操作

    <div zero-unique-overlay="31be226246fb4601bdf5f53ed69716c2" class="zeromodal-overlay" style="opacity:0.2;z-index:10013;width:1366px;height:662px"></div>

    你说这可咋整  QAQ

        cylansd0
        2017/2/28 12:43:17
        var loadUnique;
        zeroModal.show({
            title: 'UE配置',
            content: str,
            width: '70%',
            height: '80%',
            esc: true,
            ok: 'true',
            cancel: 'true',
            onLoad: onOpenEvent,
            onComplete: onCompleteEvent
        });
        function onOpenEvent() {
            loadUnique = zeroModal.loading();
        }
        function onCompleteEvent() {
            if (loadUnique !== undefined) {
                zeroModal.close(loadUnique);
            }
        }
    回复
    小石 0
    2017/2/24 10:48:49

    等待框加载后,如何关闭?或者设置有效时长?

        cylansd1
        2017/2/24 11:25:23
        var unique = zeroModal.load();
        //关闭指定zeroModal.close(unique);
        // 关闭全部
        zeroModal.closeAll();
    回复
取消回复