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脚本的性能的几个注意事项
Dec 22 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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调用数据库的存贮过程!
2006/10/09 PHP
mysql 搜索之简单应用
2007/04/27 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
志愿者爱心公益活动策划方案
2014/09/15 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
四风自我剖析材料
2014/09/30 职场文书
2015年父亲节寄语
2015/03/23 职场文书
单位病假条范文
2015/08/17 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技