jQuery提示框插件myAlert

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

 41434  365  查看评论 (29)
分享到微信朋友圈
X
jQuery提示框插件myAlert ie兼容6

更新时间:2017/12/18 上午11:44:02

更新说明:新增内容

作者有话说:

1、有压缩的版本和原版,有兴趣的小伙伴可以去看看实现原理,超级简单的

2、因为要兼容到IE低版本,所以加载 动画只能用图片来展示,不然可以直接写个动画,精美并且小,所以插件变大了一倍左右(哎,只能说万恶的IE )

四、加载中提示框

这个与myToast方法使用范围不一样:

myToast是会自动消失的短时间提示条;

myLoadding提示动作正在进行中,当动作进行完毕后必须手动调用$.removeModa()方法来关闭;

(1)默认【提示内容为:加载中,请稍后...】

$.myLoadding()

(2)自定义提示内容

$.myLoadding("这里是自定义内容")

五、删除myAlert组件(即消除掉myAlert效果)

此方法会删除除$.myToast()以外的所有myAlert中的节点

$.removeModa();


更新时间:2017/12/15 上午11:04:51

更新说明:提示框弹出时,禁止弹框下面的内容滚动,用户体验更好些。


myAlert使用方法:

本插件是基于jQuery的插件,为了良好的兼容IE6以及以上的IE浏览器,建议引用myAlert中的jquery(当然也可以根据自己的情况来选择其他jquery版本);

一、 myAlert:带有确认按钮的提示框

(1)只有提示信息,没有标题和回调函数

$.myAlert('这里是提示框内的内容');

(2)带有标题和提示信息

$.myAlert({title:'Title',message:'message'});

(3)带有标题、提示信息和回调函数

$.myAlert({title:'Title',message:'message',callback:function(){alert(1)}});

二、有确认和取消按钮的确认框

(1)只有提示信息和回调函数

$.myConfirm({message:'确认框提示内容',callback:function(){alert('callback')}})

(2)带有标题,提示信息和回调函数

$.myConfirm({title:'确认框提示标题',message:'确认框提示内容',callback:function(){alert('callback')}})

三、会自动消失,没有回调的提示条

$.myToast('提示内容')
相关插件-工具提示,弹出层

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

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

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 48465  407

仿win10侧边滑出提示框

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

jquery 工具提示插件awTooltip

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

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

    。花开在静默的半夏 0
    2021/2/4 9:44:23
    Nan Ge uncle? 0
    2018/6/11 15:11:11
    弹出框源代码调不出来,想改样式改不了
        豆豆天尊0
        2019/11/25 17:10:17
        可以该样式的,全部代码都是公开的
    回复
    zhangrun 0
    2018/4/8 16:46:47
    你好,我同时使用了loading和回调弹框,但是使用$.removeModa();结束loading的时候,弹框也一起remove掉了,有什么解决方案吗
        zhangrun0
        2018/4/8 16:56:42
        重新配置了一套loading,已解决
        yuxiaolong10
        2018/4/25 13:12:53
        对的
    回复
    0
    2018/3/29 16:20:29
    谷歌浏览器点确定之后弹出层会向左稍微移动一下然后才消失,不知道是不是正常的。
        豆豆天尊1
        2018/3/29 16:25:17

        您可以把里面的所有下面两句话搜索然后删掉,就没有你说的问题了;
        但是这样的话遮罩出现后,页面任然是可以滚动的。

        $('body').css('overflow-y', 'hidden');
        $('body').css('overflow-y', 'scroll');
    回复
    hanhaotian 0
    2018/3/13 15:59:47
    签到三天,就忘咯
        青年晚报IT部0
        2020/9/9 17:23:24
        对呀
    回复
    がさいゆの 0
    2018/3/9 14:03:33
    楼楼,有个问题BUG
    页面内容过长,你的弹出框是显示在页面正中间,而不是屏幕正中间,需要往下翻才能看到弹出
        豆豆天尊0
        2018/3/13 16:11:22
        我测试过了,并没有你说的那个问题,我写弹框样式时是用的绝对定位,屏幕滚动不会影响弹框
    回复
    kanameonison 0
    2018/1/31 13:29:58

    东西很好,就是没金币...

        豆豆天尊0
        2018/1/31 13:56:41

        签到得金币

    回复
    がさいゆの 0
    2017/12/22 14:29:11

    不知道为啥,不弹出来!

        豆豆天尊0
        2017/12/22 14:50:21

        需要在页面中加入jquery.js;myalert.css;myalert.js,如果都加入了,就看看有没有按照正确的使用方法来

        MicKing0
        2018/1/23 15:26:15

        应该没问题

        竹林听雨0
        2018/5/17 9:11:09
        弹出层我觉得还是 layer 最好用,方便快捷,一学就会; 官网给的示例非常详细 导入js css 基本上后面的代码就直接从官网上的复制过来用就行了
    回复
    豆豆天尊 0
    2017/12/18 10:32:38

    之后我会在插件里中补充一个(正在加载中的功能),可以用在ajax请求发送后、完成前

    回复
    长不大的男孩 0
    2017/12/18 9:46:05

    连续签到3天,忘记昨天签到了,又重置了,=,=

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复