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 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
javascript每日必学之继承
Feb 23 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
vue router demo详解
2017/10/13 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python实现句子翻译功能
2017/11/14 Python
python2.7安装图文教程
2018/03/13 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
详解django自定义中间件处理
2018/11/21 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python实现动态数组的示例代码
2019/07/15 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
教师的实习鉴定
2013/12/15 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
财务总经理岗位职责
2014/02/16 职场文书
承诺书怎么写
2014/03/26 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
贷款收入证明格式
2015/06/24 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers
MySQL 字符集 character
2022/05/04 MySQL