jQuery提示框插件myAlert

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

 41146  364  查看评论 (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('提示内容')
相关插件-工具提示,弹出层

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

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

jquery 工具提示插件awTooltip

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

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

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

仿win10侧边滑出提示框

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

讨论这个项目(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天,忘记昨天签到了,又重置了,=,=

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