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 HTML中的table
Apr 15 Javascript
js css样式操作代码(批量操作)
Oct 09 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
node实现爬虫的几种简易方式
Aug 22 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编码规范-php coding standard
2007/03/16 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
destoon二次开发入门示例
2014/06/20 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php验证手机号码
2015/11/11 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
javascript实现二叉树遍历的代码
2017/06/08 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
JS中的继承操作实例总结
2020/06/06 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
使用python存储网页上的图片实例
2018/05/22 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
在django中自定义字段Field详解
2019/12/03 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Python实现疫情地图可视化
2021/02/05 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
Redis入门教程详解
2021/08/30 Redis