jQuery实现摸拟alert提示框


Posted in Javascript onMay 22, 2016

页面调用JS:

$(document).ready(function() {
      $("#delete_without_layer").click(function () {
        $.tConfirm.open({body:'Are you sure to delete?',type:'confirm',onOk:function(){
          alert("yes");
        }});
      });
      $("#delete_with_layer").click(function () {
        $.tConfirm.open({overlay:true,body:'Are you sure to delete?',type:'confirm',onOk:function(){
          alert("yes");
        }});
      });
      $("#information").click(function () {
        $.tConfirm.open({body:'This is confirm box based on fancybox!',type:'info',onOk:function(){
          alert("yes");
        }});
      });
      $("#success").click(function () {
        $.tConfirm.open({body:'Save success!',type:'success',onOk:function(){
          alert("yes");
        }});
      });
      $("#error").click(function () {
        $.tConfirm.open({body:'Some fields are wrong!',type:'error',onOk:function(){
          alert("yes");
        }});
      });   $("#warning").click(function () {
        $.tConfirm.open({body:'Someone login, it\'s not real user!',type:'warning',onOk:function(){
          alert("yes");
        }});
      });
    });

jQuery实现摸拟alert提示框

Figure 1. common confirm

jQuery实现摸拟alert提示框

Figure 2. confirm box with layer

jQuery实现摸拟alert提示框

Figure 3. error box

jQuery实现摸拟alert提示框

Figure 4. success box

jQuery实现摸拟alert提示框

Figure 5. warning box

源码下载:
https://github.com/tomlxq/jquery-confirm

Javascript 相关文章推荐
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
完美的js图片轮换效果
Feb 05 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
javascript实现标签切换代码示例
May 22 #Javascript
超实用的JavaScript代码段 附使用方法
May 22 #Javascript
JavaScript数组合并的多种方法
May 22 #Javascript
浅析JavaScript回调函数应用
May 22 #Javascript
为什么JavaScript没有块级作用域
May 22 #Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 #Javascript
全面解析bootstrap格子布局
May 22 #Javascript
You might like
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python实现类的静态变量用法实例
2015/05/08 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python实现微信打飞机游戏
2020/03/24 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
桥梁工程专业求职信
2014/04/21 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
导游词之河北邯郸
2019/09/12 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis