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 相关文章推荐
IE下使用cloneNode注意事项分享
Nov 22 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
详解Vue This$Store总结
Dec 17 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
Javascript如何实现扩充基本类型
Aug 26 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
<script defer> defer 是什么意思
2009/05/10 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
canvas绘制七巧板
2017/02/03 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
创业计划书如何编写
2014/02/06 职场文书
手工社团活动方案
2014/02/17 职场文书
大学生励志演讲稿
2014/04/25 职场文书
考试后的感想
2015/08/07 职场文书