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中Eval函数的使用说明
Oct 11 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 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连接Oracle数据库
2006/10/09 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
javascript连续赋值问题
2015/07/08 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
深入理解Django的中间件middleware
2018/03/14 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
项目经理任命书
2014/06/04 职场文书
党员剖析材料范文
2014/09/30 职场文书
铁路安全反思材料
2014/12/24 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers