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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 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 分页函数multi() discuz
2009/06/21 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
python Shapely使用指南详解
2020/02/18 Python
Python通过Pillow实现图片对比
2020/04/29 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
2014国培学习感言
2014/03/05 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
运动会加油稿30字
2015/07/21 职场文书