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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 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&mysql 日期操作小记
2012/02/27 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jquery图片切换实例分析
2015/04/15 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
js实现随机点名器精简版
2020/06/29 Javascript
python实现多线程的两种方式
2016/05/22 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
django框架两个使用模板实例
2019/12/11 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
行政助理岗位职责范文
2013/12/03 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
2014信息公开实施方案
2014/02/22 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
运动会通讯稿100字
2015/07/20 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python