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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
angularjs性能优化的方法
Sep 05 Javascript
vue图片上传本地预览组件使用详解
Feb 20 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作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python中的下划线详解
2015/06/24 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
浅谈flask源码之请求过程
2018/07/26 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
小学中秋节活动方案
2014/02/06 职场文书
董事长秘书工作职责
2014/06/10 职场文书
售房委托书
2014/08/30 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书