jquery模拟alert的弹窗插件


Posted in Javascript onJuly 31, 2015

演示地址:

http://runjs.cn/detail/miwszbne

分享说明:

第N次造轮子了,只为最简单的调用,jquery模拟alert和confirm的弹窗插件

调用方法:

$.alert('your message');

$.alert('your message',function(){
 $.alert('click ok button')
});

$.confirm('your message');

$.confirm('your message',function(result){
 if(result){
  $.alert('click ok button')
 }else{
  $.alert('click cancel button')
 }
})

为了调用方便,直接将css样式写在了js中,兼容性方面只测试了IE8和chrome以及safari,都还可以。
IE8没问题想必其他现代浏览器应该也是OK的。

(function ($) {
  $.extend({
    _isalert:0,
    alert:function(){
      if(arguments.length){
        $._isalert=1;
        $.confirm.apply($,arguments);
      }
    },
    confirm:function(){
      var args=arguments;
      if(args.length&&(typeof args[0] == 'string')&&!$('#alert_overlay').length){
        if(!$('#alert_style').length) $('body').append('<style id="alert_style" type="text/css">#alert_overlay{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background:#000;filter:alpha(opacity=5);opacity:.05}#alert_msg{position:fixed;width:400px;margin-left:-201px;left:50%;top:20%;z-index:1000;border:1px solid #aaa;box-shadow:0 2px 15px rgba(0,0,0,.3);background:#fff}#alert_content{padding:20px;font-size:14px;text-align:left}#alert_buttons{padding:10px;border-top:1px solid #aaa;text-align:right;box-shadow:0 1px 0 #fff inset;background:#eee;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#alert_buttons .alert_btn{padding:5px 12px;margin:0 2px;border:1px solid #aaa;background:#eee;cursor:pointer;border-radius:2px;font-size:14px;outline:0;-webkit-appearance:none}#alert_buttons .alert_btn:hover{border-color:#bbb;box-shadow:0 1px 2px #aaa;background:#eaeaea}#alert_buttons .alert_btn:active{box-shadow:0 1px 2px #aaa inset;background:#e6e6e6}</style>');
        var dialog=$('<div id="alert_overlay"></div><div id="alert_msg"><div id="alert_content">'+args[0]+'</div><div id="alert_buttons"><button class="alert_btn alert_btn_ok">确定</button><button class="alert_btn alert_btn_cancel">取消</button></div></div>');
        if($._isalert) dialog.find('.alert_btn_cancel').hide();
        dialog.on('contextmenu',function(){
          return !1;
        }).on('click','.alert_btn_ok',function(){
          dialog.remove();
          if(typeof args[1]=='function') args[1].call($,!0);
        }).on('click','.alert_btn_cancel',function(){
          dialog.remove();
          if(typeof args[1]=='function') args[1].call($,!1);
        }).appendTo('body');
      }
      $._isalert=0;
    }
  });
})($);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
JSON字符串转JSON对象
Jul 31 #Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 #Javascript
JavaScript实现快速排序的方法
Jul 31 #Javascript
javascript常用正则表达式汇总
Jul 31 #Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 #Javascript
js实时获取并显示当前时间的方法
Jul 31 #Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 #Javascript
You might like
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
js图片上传的封装代码
2017/08/01 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
RC4文件加密的python实现方法
2015/06/30 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
详解Python中is和==的区别
2019/03/21 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python占用的内存优化教程
2019/07/28 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
vscode调试django项目的方法
2020/08/06 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
个人课题方案
2014/05/08 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
销售目标责任书
2014/07/23 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
详解Python中的进程和线程
2021/06/23 Python
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
Python OpenCV实现图像模板匹配详解
2022/04/07 Python