jqueryAlert弹框插件(pcwap)

所属分类:UI-工具提示,弹出层

 15862  99  查看评论 (56)
jqueryAlert弹框插件(pcwap) ie兼容8

更新时间:2018/1/10 下午4:16:11

更新说明:ie8中的信息提示中图片的兼容


更新时间:2017/9/19 下午4:43:31

更新说明:兼容模块化引入


更新时间:2017/8/28 上午10:00:42

更新说明:解决PC端带触摸事件,导致判断触发事件的错误问题


更新时间:2017/8/22 下午5:23:23

更新说明:解决在ie中滚动内容被覆盖问题,声明,信息提示icon图,不兼容ie8


更新时间:2017/8/18 上午10:00:10

更新说明:修改content属性,让content属性兼容$("#content").html()方式填充内容


更新时间:2017/8/16 上午11:43:03

更新说明:添加icon参数,信息提示中的小图片,只在title和button都不存在下生效


更新时间:2017/8/10 下午7:26:36

更新说明:解决在jq22下box-sizing:border-box被覆盖问题,在alert-content中添加box-sizing属性,防止被覆盖掉问题


更新时间:2017/8/10 上午11:44:21

更新说明:解决button按钮的宽度问题


alert.js

alert.js是基于jQuery开发的一款 PC 移动端 都兼容的轻量级弹层组件

浏览器兼容

浏览器兼容,下面是我们的主要兼容目标

1、IE8 或者 IE8以上 (Windows), IE8以下浏览器不兼容

2、Safari (Mac)

3、Chrome (Windows, Mac, Linux)

4、Firefox (Windows, Mac, Linux)

5、谷歌内核(webkit)浏览器,如360浏览器,搜狗浏览器,QQ浏览器等

核心方法(配置): jqueryAlert(opts)

opts是一个对象,它包含了以下key: '默认值'

javascript 代码:

'style'        : 'wap', //移动端和PC端
'title'        : '',    //标题
'content'      : '',    //内容
'contentTextAlign' : 'center', //内容对齐方式
'width'        : 'auto', //宽度
'height'       : 'auto', //高度
'minWidth'     : '0', //最小宽度
"className"    : '', //添加类名
'position'     : 'fixed', //定位方式
'animateType'  : 'scale',
'modal'        : false, //是否存在蒙层
'isModalClose' : false, //点击蒙层是否关闭
'bodyScroll'   : false, //是否关闭body的滚动条
'closeTime'    : 3000, //当没有按钮时关闭时间
"buttons"      : {}, //按钮对象

参数配置

// 判断是否已存在,如果已存在则直接显示
if(M.dialog1){
    return M.dialog1.show();
}
M.dialog1 = jqueryAlert({
    'content' : 'hello 程序员...'
})

更多参数配置,请查看下载或演示文件。

相关插件-工具提示,弹出层

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 7726  45

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 7074  93

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 14421  85

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 10888  74

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

    x. 0
    2018/1/15 15:44:03
    在Script中能用吧?  回复
    奢华的落寞 0
    2017/12/2 11:41:45

    弹出层里支持打开一个新页面的特效吗?

        奢华的落寞0
        2017/12/2 11:43:11

        比较郁闷,想用这种弹出特效打开一个新的页面,好像不支持,还 有没有好点的方法?

    回复
    林_枫 0
    2017/11/26 20:17:56

    头大了,弹窗内容写在body的隐藏子div里,并且给弹窗内容div中的按钮绑定了点击事件,取消隐藏测试了绑定的点击事件没有错,但是弹窗里的对应按钮就不响应点击事件!大大,救救我!

        执手到白头*/0
        2017/11/29 19:00:39
        能不能点到当前div呢?
    回复
    林_枫 0
    2017/11/26 16:54:27

    另外发现一个问题,弹窗弹出后在body里新建一个弹窗的div,但是关闭后没有把弹窗div从body里去除掉,(并不知道作者大大是处于什么目的不移除),不过这样会导致弹窗中的input标签的值获取不到或者获取不准!(个人有这种情况,用的最简单的获取的方法),刚刚查了一下,每弹出一个相同的弹窗,input标签就会增加一个,长度就增加一个,所以获取不准!

    作者大大能告诉一下弹窗关闭以后不移除弹窗元素的原因吗?

        林_枫0
        2017/11/26 17:19:02
        读了源码,有destroy方法,实在抱歉!!!
    回复
    林_枫 0
    2017/11/26 3:42:39
    问一下作者大大,弹窗内容中有我自己写的按钮,怎么对按钮绑定事件,去执行关闭本弹窗并弹出子弹窗、发起ajax等其他函数呢?有点忙不过来,没读大大的源码!说到底就是我想要自由定制按钮样式和弹窗背景!现在版本是不是没有现成的方法?感觉需要读源码orz!
        林_枫0
        2017/11/26 4:00:25

        动态绑定事件还是没有生效,我看弹窗后的html结构里是的确新增了了一个class:alert-content的固定定位的div,该div的内容就是我的弹窗内容代码原文,包括按钮。在想为什么on()绑定会不生效!

    回复
    幸福的角落 0
    2017/11/20 15:58:50

    如果是打开子窗口后如何通过子窗口里面嵌入页面的按钮来关闭子窗口

    回复
    json 0
    2017/11/17 18:14:56

    我加入了bootstarp引起样式冲突如何解决呢

        执手到白头*/0
        2017/11/18 23:40:57

        使用!important解决一下,或者改下源码样式

        lee0
        2017/11/29 12:31:26

        3q

    回复
    林_枫 0
    2017/11/5 14:00:16

    有个小问题,对网页架构的时候用了iframe引入另外的页面,对iframe引入的页面里面的按钮用这个插件的时候,遮幕范围就是就只能iframe标签的范围,没有遮住整个页面,弹窗位置也是相对于iframe来说的,问你一下作者大大怎么你那边有现成的解决方案吗?

        执手到白头*/0
        2017/11/6 0:21:27
        没在iframe中使用过,你可以看源码调整一下
    回复
    $ $ 0
    2017/10/17 15:10:51
    在弹框淡入之后 有没有回调的函数执行其他方法。
        执手到白头*/0
        2017/10/18 9:19:58
        没有
    回复
    岁月止于你 0
    2017/10/11 14:40:50
    弹出层里面能引用其他的插件吗???
        执手到白头*/0
        2017/10/12 9:10:39

        能啊!看你怎么引了

    回复
取消回复