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 相关文章推荐
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
vue-父子组件和ref实例详解
Nov 10 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
jQuery动态添加
2016/04/07 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
django 外键创建注意事项说明
2020/05/20 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
会计专业个人自我鉴定
2014/03/21 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
优秀教师事迹材料
2014/12/15 职场文书
初中生毕业评语
2014/12/29 职场文书