UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jqueryAlert弹框插件（pcwap）

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

 74229  485  查看评论 (98)
分享到微信朋友圈
X
jqueryAlert弹框插件（pcwap） ie兼容8
 查看演示  website  立即下载

更新时间：2019-08-21 00:05:08

更新说明：增加弹框关闭后的回调函数

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

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

相关插件-工具提示,弹出层
查看更多

按首字母搜索(仿携程)

 城市查找按首字母搜索(仿携程)
  工具提示
 39365  435

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

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

仿win10侧边滑出提示框

 一款模拟win10的消息提示框toastr
  工具提示
 29567  375

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

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

讨论这个项目（98）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    老掉牙 0
    2024/8/1 13:54:45
    这个弹窗挺好用的，简单明了，稍作修改也方便。满足绝大部分使用需求了。 回复
    XJTM 0
    2020/5/29 2:45:33
    怎么把prompt输入框得到的值给一个变量，然后求和？
        XJTM0
        2020/5/29 2:49:50
        var a=prompt();
var b=prompt();
console.log(a+b);//这是原生prompt的效果
    回复
    lpy164507790 0
    2019/10/16 12:08:18
    怎么设置mobile的弹框带右上角关闭叉号
        执手到白头*/1
        2019/10/16 16:15:03
        没有参数，直接在content中增加叉号设置样式吧
        lpy1645077900
        2019/10/17 15:23:48
        好的,谢谢
    回复
    LJC 0
    2019/8/7 17:57:39
    没有回调吗，像默认弹框执行完以后做一些动作
        执手到白头*/0
        2019/8/21 13:38:10
        回调已加
    回复
    _____花瑾少年 0
    2019/5/15 0:29:57
    大佬，我把动画二那块代码嵌到我自己的页面上了，电脑端点击是没问题的，但是手机端上点就没反应，是啥情况
        执手到白头*/0
        2019/5/16 9:06:18
        贴代码
        _____花瑾少年0
        2019/6/12 22:44:28
        刚看到，这个问题我解决掉了，可以弹层了，但是在手机端上弹出来的窗口不能滚动，超出的部分被截断了，这个是啥情况啊
    回复
    Admin 0
    2019/4/30 16:25:04
    // 监听所有弹层关闭
$('body').on('click', '.JDDDTOOLS616766349 .alert-btn-close', () => {
    // 销毁
    this.destroyModal();
})

// 弹层销毁实例 
this.destroyModal = function() {
    for (let key in this.Modal) {
        this.Modal[key].destroy();
    }
}

    我这样监听所有Modal的关闭事件去销毁所有已创建的Modal实例应该没问题吧？   

    回复
    Admin 0
    2019/4/26 15:22:46
    怎么监听关闭事件呢？
        执手到白头*/1
        2019/4/28 9:07:20
        'buttons': {
    '确定': function() {
        M.dialog2.close();
    }
}
        Admin0
        2019/4/30 15:51:02
        其实我想要的是关闭后的回调函数
        Admin0
        2019/4/30 16:21:29
        已经实现了 直接监听右上角的关闭按钮点击事件触发
    回复
    Admin 0
    2019/4/22 18:20:09
    怎么更新内容？ 是不是只能重新初始化？
        执手到白头*/0
        2019/4/26 9:51:36
        具体什么意思能不能举例说明
        Admin0
        2019/4/26 15:24:47
        我定义一个Modal长显示，里面的内容我要根据请求内容去赋值
        执手到白头*/1
        2019/4/28 9:05:32
        最简单的办法就是销毁后，再次定义
    回复
    大佬 0
    2018/9/17 16:15:12
    content可以不写var吗？
    回复
    longshao_o 0
    2018/8/24 16:51:40
    if(M.dialog1){
  return M.dialog1.show();
}

    每次调用都要判断一下，不太方便吧

        执手到白头*/0
        2018/8/29 9:08:04
        这么做是避免每次都进行更新
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复