评论：jQuery弹出层组件zeroModal  [查看原文]

所属分类：UI-弹出层

 117198  636  223
当前第4页 / 共6页
    无敌小黄色0
    2017/5/26 11:58:53
    作者你好，我使用的时候发现成功提示中或者confirm中的ok属性没有生效，请问是什么原因呢？我就是想隐藏这个按钮。
        cylansd0
        2017/5/26 15:20:35

        代码升级到最新， 调用

        zeroModal.success({
  content: '操作成功',
  ok: false
});

        就可以了

    回复
    tzl500wan0
    2017/5/17 16:21:08
    您好，码云上面，我看了你上传的新版js，里面有个Mustache变量，在哪里定义的？引入zeroModal.js还需要引入其它js支持么？
        cylansd0
        2017/5/17 16:52:45

        在lib目录下面的 mustache.js，

        zeroModal.min.js中已经包含进去了

        tzl500wan0
        2017/8/23 14:07:25

        感谢作者的回答，现在又有个需求，就是.show()打开弹窗的高度能自适应里面的内容么？

    回复
    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/8/30 15:40:25

        你好!遇到同样的问题,success()刹不住车,普通alert()可以停住js往下运行,点了确定才行,但是zeroModal.alert()或success()不行!请教解决方案!

    回复
    笨笨的猪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

        作者大大真给力，又遇到了问题，请教一下弹出动画怎样才能改成淡入淡出

        cylansd1
        2017/6/27 12:50:07

        不好意思才看到。目前组件不能直接支持这个效果。不过你可以自己修改源码实现。

        1.先确认zeroModal是最新的；

        2.第35行，定义的模板加上隐藏属性；

            var _zero_modal_template = '<div zero-unique-container="{{unique}}" class="zeromodal-container" style="display:none;  ......

        2.第537行下面，添加  $('[zero-unique-container="' + opt.unique + '"]').fadeIn();

        即可实现淡入。

        淡出的效果，直接修改446行_close函数即可

        笨笨的猪0
        2017/7/3 22:32:46
        十分感谢
    回复
    Denzel0
    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

        如果发现了问题都会回复和解决的  :）

    回复
    dkkwhdq0
    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的页面处理好了

    回复
    - -!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

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

    回复
    netSharks0
    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 实现

        空瓶子0
        2017/8/10 19:27:19

        宏憬，你好！请教你一个问题：

        问题：我对弹出框添加了input框，但是不能在input框内输入内容。

        自我排错：1）input没被遮盖；2）没检索到有js控制input

        请问你有遇到这种问题吗？怎么解决的呢？谢谢！

    回复
    tkduduxiong0
    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

        太感谢了,很完美的组件

    回复

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

取消回复