jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 18446  145  查看评论 (71)
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弹出层关闭后事件



相关插件-弹出层

18种弹框特效

18种弹框特效
  弹出层
 26402  301

jquery灯箱插件Rebox

jQuery-Rebox是一个简单的、轻量级的、响应和移动友好的jQuery 灯箱插件。很简单,不需要任何图像。
  弹出层
 12777  25

VenoBox jQuery灯箱插件

VenoBox 又一个响应的jQuery灯箱插件,适用于图片,内嵌的内容, iFrame中,百度地图,谷歌地图, Ajax请求,或是Vimeo和YouTube视频。
  弹出层
 13831  18

jQuery SimplePop

一款可替代原生弹出框的插件,包括alert,confirm,prompt,并且可高度自定义
  弹出层
 12493  45

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

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

    最近用大佬的插件发现一个问题。。android 机器上面显示是ok的 (我是用url的方法打开一个窗口,窗口里面是列表),结果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();
    回复
    徐义德 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
        马总厉害了~
    回复
取消回复