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 相关文章推荐
非常好的js代码
Jun 27 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
js与applet相互调用的方法
Jun 22 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python 实时遍历日志文件
2016/04/12 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python 实现图片批量压缩的示例
2020/12/18 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
2014年优秀党员材料
2014/12/18 职场文书
调任通知
2015/04/21 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
信用卡收入证明范本
2015/06/12 职场文书