jQuery弹出层组件zeroModal

所属分类:UI-弹出层

 36097  253  查看评论 (160)
jQuery弹出层组件zeroModal ie兼容9

弹出层组件zeroModal

2017-5-26日更新

支持弹出常用的模态框,及操作提示框、操作等待层等。

调用方法说明
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弹出层关闭后事件
相关插件-弹出层

flavr—超级漂亮的jQuery扁平弹出对话框

flavr是一个时尚的扁平弹出对话框为您的下一个网站。 flavr是响应设计布局,能够适应任何屏幕大小。 得到最好的用户体验,使用流行的animate.css动画,最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
  弹出层
 66953  637

jquery弹出框插件dialogbox

jquery弹出框插件dialogbox
  弹出层
 15887  33

悬浮九宫格菜单jQuery插件

悬浮九宫格菜单jQuery插件
  弹出层
 19436  102

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 11596  65

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

    魅狐血儿 0
    2017/12/15 17:07:41

    谢谢作者,问一下需要支持到 IE7+,不知道有什么办法么

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"/>

        cylansd0
        2017/12/15 17:15:08

        。。。IE7的话,很多样式都不支持,不太适合使用这个组件。。。如果需要保证兼容性足够好的话,还是建议使用一些比较老的、实践得更多的组件比较稳妥点,可以考虑比较完善的extjs、或者轻量级的colorbox

        魅狐血儿0
        2017/12/15 17:45:58

        感谢~~感谢~~

    回复
    魅狐血儿 0
    2017/12/15 16:40:39

    包都导过了

        cylansd0
        2017/12/15 16:42:18

        目前只支持IE10或以上

        魅狐血儿0
        2017/12/15 16:55:03

        谢谢作者,问一下需要支持到 IE7+,不知道有什么办法么

        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"/>

        cylansd0
        2017/12/15 17:10:41

        。。。IE7的话,很多样式都不支持,不太适合使用这个组件

    回复
    魅狐血儿 0
    2017/12/15 16:36:23
    Dream knight 0
    2017/12/5 15:38:24

    为什么我引用完刚点击按钮是好使的,但马上弹框就消失了,像闪现了一下就没了

        cylansd0
        2017/12/5 15:54:34

        建议先去掉引用的其他的JS,看看是否是和其他的JS 存在冲突?

    回复
    Sion2017 0
    2017/12/1 17:48:31
    作者你好,有个问题就是transition设置为true一样没有动画,transition:true 
        cylansd0
        2017/12/5 15:43:07
        出场动画效果,之前去掉了,   后期会再补上去
    回复
    天尊 0
    2017/11/24 21:41:44

    之前提问的窗口等比例缩放的问题。我已经知道如何解决了。看了源码,其实height与width主要在于百分比设置,而不是固定px。 插件很不错。我觉得比layer要好用,轻量级。layer如果出现了样式冲突,太难找了。网上找到你这个插件还是不错的,赞一个!你这个插件在开源中国上的地址是什么?

        cylansd0
        2017/11/25 9:55:46

        谢谢你的称赞 ^___^ ,地址是:https://gitee.com/cylansad/zeroModal   不过插件目前已经比较稳定,最近没做过什么更新了

    回复
    天尊 0
    2017/11/24 21:24:49

    请问,当我缩小或者拉大浏览器窗口的时候,如何让你的这个出口可以按比例缩小或者扩大?没找到解决办法

    回复
    DeweyLiu 0
    2017/9/29 13:52:55

    不知为何右上角没有关闭按钮

        cylansd0
        2017/10/17 20:29:24

        可以检查下是否样式和其他的插件存在冲突?

    回复
    my Joy is with everyone 0
    2017/9/26 18:25:05

    版主 报Mustache is not defined 怎么解决

        cylansd0
        2017/9/26 18:37:23

        引用lib目录mustache.js 即可。 

        或者直接引用zeroModal.min.js  (已包含mustache.js)

    回复
    天灬籁 0
    2017/8/30 15:08:14

    请教楼主,我的问题是直接用alert是可以弹出提示框的,但是换用zeroModal.alert就没有提示框直接关闭了.请教楼主怎么解决呢?同一个项目其他地方用alert没问题,只是在iframe里面使用这个弹出层就不灵了.

        cylansd1
        2017/8/30 17:26:22

        建议注释一些其他的JS, 看是否是其他JS代码导致的;或者按F12看看有没有出错 以及Elements里面有没有动态添加上zeroModal的元素

    回复
取消回复