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 相关文章推荐
自动更新作用
Oct 08 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
用console.table()调试javascript
Sep 04 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python GUI编程完整示例
2019/04/04 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
副总经理工作职责
2013/11/28 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
《散步》教学反思
2014/03/02 职场文书
《锄禾》教学反思
2014/04/08 职场文书
责任书范本
2014/08/25 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
南湾猴岛导游词
2015/02/09 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers