移动端弹出层插件(原创)

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

 37615  341  查看评论 (15)
分享到微信朋友圈
X
移动端弹出层插件(原创) ie兼容12

以下是调用方法

Dialog.init('测试文字') //默认
Dialog.init('测试文字',2000) //第二个参数时间,2秒后自动关闭
Dialog.init('测试文字',{
   time : 1000,  //自动关闭
   maskClick : false, //点击背景层是否关闭弹层
   mask : false, //是否显示遮罩
   title : '是否删除?', //添加标题
   index : 1,  //设置索引,用于close方法
   addClass : 'bgRed', //追加class
   style : 'color:red', //追加css
   button : { //按钮
       确定 : function(){
           Dialog.init('你点击了确定',1000);
           Dialog.close(this);
       },
       取消 : function(){
           Dialog.init('你点击了取消',1000)
           Dialog.close(this);
       }
   },
   before : function(){
       //this.classList.add('autoWidth')
       //dom创建成功,但未渲染
       console.log('创建成功',this);
   },
   after : function(){
       console.log('关闭成功',this)
   },
   onload : function(){
       console.log('加载成功',this)
   }
});
//关闭
Dialog.close(this); //在内部使用可直接使用this
Dialog.close(1,function(){
   //手动关闭弹层,第一个参数为索引值(配合上面index参数使用);
   //第二个参数为回调
});
相关插件-工具提示,弹出层

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

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

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

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

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

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

jquery 工具提示插件awTooltip

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

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

    彭宏丁 0
    2022/4/26 15:04:51
    怎么将弹出层回调方法设置为同步
        Function0
        2022/4/26 15:06:39
        详细描述一下
    回复
    变坏了的好人 0
    2019/11/4 10:36:49
    我觉得不错 哈哈 简单好用
        "、灬狮子座0
        2019/12/13 16:18:30
        试过吗?兼容IOS吗?
    回复
    weixiaofantasy 0
    2019/3/25 14:40:31
    非常棒,用起来方便 回复
    aa8210397 0
    2019/2/20 14:25:27
    睡古 0
    2019/2/3 14:53:41
    如果有多个input怎么获取每个的值? 回复
    泡在酒瓶里的星星 0
    2018/10/17 14:10:41
    弹窗页面出来后闪一下,样式进行了改变
        Function0
        2018/10/19 17:17:50
        样式进行了改变是什么意思?
    回复
    wuxyu 0
    2018/10/16 10:24:10
    不兼容IE哟,极速浏览器上效果确实不错! 回复
    ????从你世界路过 0
    2018/8/14 14:55:53
    兼容iE吗?
        Function0
        2018/8/14 15:00:39
        移动端哪里来的ie?
    回复
    Can't Be Defeated 0
    2018/6/28 14:09:13
    为什么pc上感觉动画开始的时候有一点模糊,但手机上没有模糊
        Function0
        2018/6/28 14:40:36
        PC端浏览器对css3的渲染问题,这个没关系的
        jiojio0
        2018/8/29 17:45:18
        移动端可以直接使用mui框架呀,东西非常的齐全。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复