jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 13558  118  查看评论 (59)
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弹出层关闭后事件



相关插件-弹出层

jquery图片播放弹出插件Fancybox

好用的jquery图片播放插件Fancybox使用方法
  弹出层
 14907  64

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

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

通用的iframe弹层插件

通用的iframe弹层插件
  弹出层
 12763  24

漂亮实用的提示框插件SweetAlert

漂亮实用的提示框插件SweetAlert
  弹出层
 17379  244

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

    Garcia0
    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

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

        cylansd0
        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标签,我平常不怎么做前段一直是写接口的所以也不是很懂,麻烦作者大大了= =

        cylansd0
        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
        马总厉害了~
    回复
    dobug0
    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

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

    回复
    半个红苹果0
    2016/12/17 12:12:36

    怎么给iframe页赋值和取值呢?比如我在弹出的iframe页有个input,ID为otext,父页有个ID为text,点击弹窗后如果父页的text有数值则赋值给iframe页的otext,当我改变iframe页的otext值时,按确定后会改变父页的text

    回复
    :Byd_Bya }0
    2016/11/26 17:11:13
    按钮能自定义,没问题。如何给自定义的按钮添加事件呢? 修改了源码添加了ID ,jsp 页面调用没有反映!请问如何解决????
        cylansd1
        2016/11/26 20:11:02
        1.可以参考下demo中的第五个例子“自定义按钮”,里面就有自定义click事件。2.如果使用默认的按钮,可以使用okFn或cancelFn事件。
    回复
    DQJ俊逸0
    2016/11/19 18:11:27
    如果能根据需求自定义就好了 回复
    SergiRoberto200
    2016/11/16 18:11:18
    要怎么构建 弹出框内body的内容是个问题,感觉不够灵活额我的思路是在外面加一个div(弹出框需要显示的内容),里面编辑标签设置样式,  通过按钮点击事件,将这个外层div,追加进插件的body中,还没试过,不知道行不行  回复
取消回复
    PROMULGATOR

    cylansd

    江苏省南京市