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函数的重载
Sep 22 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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/10/23 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
图片自动更新(说明)
2006/10/02 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python encode和decode的妙用
2009/09/02 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
通过实例学习Python Excel操作
2020/01/06 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python常用外部指令执行代码实例
2020/11/05 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
应届大学生的推荐信
2013/11/20 职场文书
开工仪式主持词
2014/03/20 职场文书
环保宣传标语
2014/06/12 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python