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 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
JavaScript实现拖拽效果
Mar 16 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
图形数字验证代码
2006/10/09 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
Angular2实现组件交互的方法分析
2017/12/19 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python实现图像拼接
2020/03/05 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
市场总经理岗位职责
2014/04/11 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
九年级英语教学反思
2016/02/15 职场文书