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

jqueryAlert弹框插件（pcwap）

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

 75657  486  查看评论 (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 程序员...'
})

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

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

一款腾讯UED设计的提示插件

 一款腾讯UED设计的提示插件
  工具提示
 44653  435

jquery 工具提示插件awTooltip

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

jq 提示插件

 封装 jq 提示插件 Confirm ，兼容ie811chrome ff
  工具提示
 48961  407

超漂亮的placeholders提示

 超漂亮的placeholders提示
  工具提示
 34159  394

讨论这个项目（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
        这么做是避免每次都进行更新
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复