jqueryAlert弹框插件(pcwap)

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

 24091  122  查看评论 (70)
jqueryAlert弹框插件(pcwap) ie兼容8

更新时间:2018/4/3 下午1:19:23

更新说明:alert.api中添加actionsheet调用方法


更新时间: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 程序员...'
})

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

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

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 17307  96

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

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

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 12355  82

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 11650  40

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

    李信妥 0
    2018/6/28 2:41:13
    ㄨ??舞仔┊ 0
    2018/6/4 17:18:02
    这个插件 弹出窗 要把弹出的代码隐藏到哪里,在当前面页隐藏,弹出来也是看不见的, 回复
    ㄨ??舞仔┊ 0
    2018/6/4 16:14:33
    窗 隐藏的怎么弹出来,要把代码隐藏到哪里
        执手到白头*/0
        2018/6/4 17:31:21
        哥们你问的这个问题好复杂,我真的不明白你具体问的是什么意思?这个弹窗的api也是很少的,你可以了解看一下啊!如果还是不明白你加我QQ,或者在http:fy.035k.com上留言也可以啊
        ㄨ??舞仔┊0
        2018/6/4 18:56:47
        你QQ多少
        执手到白头*/0
        2018/6/28 15:25:53
        515184405
    回复
    Masar Hubor 0
    2018/5/25 12:16:23
    在require下使用会报错
        Masar Hubor0
        2018/5/25 12:22:08
        若要在require下使用 在js中要去掉$(function()){}
    回复
    Tempest_ 0
    2018/3/12 15:45:11
    要引的太多了。。。
        执手到白头*/1
        2018/3/13 9:01:55
        你是不是看成文档的引入了???引的怎么多了,就需要引入一个jquery,一个alert.js就好啊!
    回复
    岁月清浅 安之若素 0
    2018/2/2 10:58:35

    问下这个有没有后置才做,比如正确提示完,直接再弹个窗口,或是直接跳转页面,这样可以吗???

        执手到白头*/1
        2018/2/5 8:58:05
        这个只有点击按钮才会有callback
    回复
    0
    2018/1/30 17:06:25

    是不是可以不指定style参数,自动判断当前是pc还是mobile来选择弹框的样式?

        执手到白头*/1
        2018/1/31 9:07:32

        这个没有去加,因为有时候pc也有可能使用mobile的样式弹框,所以没有考虑自动识别

    回复
    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呢?
    回复
取消回复