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中常见陷阱小结
Apr 27 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
写一个Vue Popup组件
Feb 25 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
微信小程序实现身份证取景框拍摄
Sep 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获取QQ头像并显示的方法
2014/12/23 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
对比分析json及XML
2014/11/28 Javascript
ExpressJS入门实例
2015/01/14 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python如何从文件读取数据及解析
2019/09/19 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Python之字典对象的几种创建方法
2020/09/30 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
护理学毕业生求职信
2013/11/14 职场文书
大学生求职推荐信
2013/11/27 职场文书
高二英语教学反思
2014/01/19 职场文书
房产公证书范本
2014/04/10 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js
mysql全面解析json/数组
2022/07/07 MySQL