jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 15560  128  查看评论 (68)
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弹出层关闭后事件



相关插件-弹出层

CSS3地图热点文字标注提示

当点击地图上的某一位置时,会弹出提示。
  弹出层
 8081  64

移动端弹出层jquery插件简易

移动端弹出层jquery插件简易
  弹出层
 10199  22

通用的iframe弹层插件

通用的iframe弹层插件
  弹出层
 13111  25

jquery弹出层兼容所有浏览器

jquery弹出层兼容所有浏览器
  弹出层
 33464  76

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

    小石 0
    2017/2/24 10:48:49

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

        cylansd1
        2017/2/24 11:25:23
        var unique = zeroModal.load();
        //关闭指定zeroModal.close(unique);
        // 关闭全部
        zeroModal.closeAll();
    回复
    徐义德 0
    2017/2/17 14:08:34
    插件好顶赞,作者人品没得说,赞。一个个的回复。真的感谢你。只能祝你鸡年整年大吉吧。
        cylansd0
        2017/2/20 13:38:48

        谢谢你的支持。??

        cylansd0
        2017/2/20 13:40:06

        :)

    回复
    wolfwolf 0
    2017/2/12 0:34:02

    你好,设置遮罩层关闭overlayClose这个属性后无法正常加载弹出层

        cylansd0
        2017/2/14 20:20:40

        是参考的demo6吗? 可以再具体一些描述下无法正常加载弹出层的情况.

    回复
    发发发 0
    2017/1/23 17:38:48

    不错 不错 我看留言的没有涉及ajax 如果能内嵌ajax最好了  也没仔细看,也可能有的

        cylansd1
        2017/1/23 17:42:32

        目前如果只设置了url属性,iframe属性为false时,就是通过ajax方式加载url返回的页面并放到modal里面的

    回复
    Garcia 0
    2017/1/16 15:35:49

    弹框的一个小X,没有属性去除嘛

        cylansd0
        2017/1/16 15:48:50

        http://git.oschina.net/cylansad/zeroModal,   代码升级到最新,使用close参数即可。

    回复
      0
    2017/1/11 10:01:45

    我想自定义弹出层样式。。。   还有确认按钮

        cylansd1
        2017/1/16 15:49:21

        可以通过修改css样式,和使用buttons 自定义按钮来实现

    回复
    寒星 0
    2017/1/6 16:01:16
    function openRequest(obj) {
    	var testinfo = $("#request" + obj).val();
    	alert(testinfo);
    	//此处弹出还是xml格式字符串
    	zeroModal.show({
    		title: '报文详情:',
    		content: '<c:out value="' + testinfo + '"  escapeXml="false"/>',
    		//此处不管是自己输出还是用html标签,jstl标签包裹输入都会被去除所有xml标签
    		width: '60%',
    		height: '40%',
    		transition: true,
    		overlay: false
    	});
    }

    作者你好,我需要在弹出层中输出一个xml格式的字符串内容,但是一直会被吞掉标签

        寒星0
        2017/1/6 16:01:59

        请问有什么办法处理吗,谢谢

        cylansd0
        2017/1/6 17:01:16

        你好,你使用是c标签,应该是编辑的jsp页面吧?

        jsp在编译过程中先解析标签再转换成html,再返回给客户端,再执行JS代码。

        上面调用的实例是不是有问题?

        寒星0
        2017/1/6 17:01:39

        补充说明,该数据在后台经过StringEscapeUtils.escapeHtml()方法处理,在页面能正常输出

        寒星0
        2017/1/6 17:01:38

        代码中的testinfo的值是取自jsp页面中的一个隐藏域 ,该值直接alert弹出能正常显示,在content中直接输出或者用<span>testinfo</span>输出,或者像代码中一般用c标签输出,都会失去xml标签,我平常不怎么做前段一直是写接口的所以也不是很懂,麻烦作者大大了= =

        cylansd1
        2017/1/7 15:01:06

        你可以把testinfo的值进行html转义下试试。

        <批量转换成&lt;
        >批量转换成&gt;
        或者将zeroModal升级到最新,把escape设置为false试试
    回复
    雨亦心菲 0
    2017/1/3 19:01:37

    请问一下,弹框想改成从右至左弹出,改了一下,没用,请问应该改哪块

        cylansd3
        2017/1/3 19:01:39

        你好,三个步骤可以完成修改。

        1. 把参数transition设置为true

        2. 第479行,修改CSS样式控制初始化的位置

        3. 第526行,修改出场动画移动的位置即可。

        雨亦心菲0
        2017/1/4 13:01:05

        请问一下 除了这个平台 有其他的联系方式嘛 qq 想问一下其他问题

        雨亦心菲0
        2017/1/4 14:01:42

        请问一下 能把iframe添加到index页面的指定div里面嘛

        cylansd0
        2017/1/4 14:01:34

        89743946  你可以加下QQ

        逸尘凌虚~~0
        2017/1/4 15:01:45
        马总厉害了~
    回复
    dobug 0
    2016/12/29 22:12:45

    作者你好,我使用你的插件,弹出层里面写input的radio标签,不显示啊,盼回复。代码如下:

    <table width = "100%" align = "center" > 
        <tr >
           <td><input type="radio" style="border:inset; width:20%" name="ChooseTime" value="1天" checked="checked" />1天</td>
           <td><input type="radio" name="ChooseTime" value="3天" />3天</td>
           <td><input type="radio" name="ChooseTime" value="7天" />7天</td>
           <td><input type="radio" name="ChooseTime" value="7天以后" />7天以后</td>
        </tr > 
    </table>
    function PreOrderClick() {
        var obj = $("#PreOrderSubmit").html();
       zeroModal.show({
        title: '选择预约时间',
        content: obj,
        ok: true,
        cancel: true,
        width: "50%",
        height: "20%",
        okFn: PreOrderSubmit
    }
        cylansd0
        2016/12/30 8:12:58

        html里面是否有ID叫"PreOrderSubmit" 的元素?另外建议模板使用

        <script type="text/html" id="PreOrderSubmit">
                <table width="100%" align="center">
                    <tr>
                        <td>
                            <input type="radio" style="border: inset; width: 20%" name="ChooseTime" value="1天" checked="checked" />1天</td>
                        <td>
                            <input type="radio" name="ChooseTime" value="3天" />3天</td>
                        <td>
                            <input type="radio" name="ChooseTime" value="7天" />7天</td>
                        <td>
                            <input type="radio" name="ChooseTime" value="7天以后" />7天以后</td>
                    </tr>
                </table>
        </script>

        来定义

    回复
    零点 0
    2016/12/24 15:12:09

    在content中加入input标签,无法输入数据

        cylansd0
        2016/12/24 17:12:51

        建议把代码贴出来,可以一起来分析下。应该是和插件没有关系的。

    回复
取消回复
    PROMULGATOR

    cylansd

    江苏省南京市