使用jQuery实现更改默认alert框体


Posted in Javascript onApril 13, 2015

更改框体主要用到的是更改系统的内置控件winpop下面是winpop具体代码

(function(window, jQuery, undefined) {
 
   var HTMLS = {
     ovl: '<div class="J_WinpopMask winpop-mask" id="J_WinpopMask"></div>' + '<div class="J_WinpopBox winpop-box" id="J_WinpopBox">' + '<div class="J_WinpopMain winpop-main"></div>' + '<div class="J_WinpopBtns winpop-btns"></div>' + '</div>',
     alert: '<input type="button" class="J_AltBtn pop-btn alert-button" value="确定">',
     confirm: '<input type="button" class="J_CfmFalse pop-btn confirm-false" value="取消">' + '<input type="button" class="J_CfmTrue pop-btn confirm-true" value="确定">'
   }
 
   function Winpop() {
     var config = {};
     this.get = function(n) {
       return config[n];
     }
 
     this.set = function(n, v) {
       config[n] = v;
     }
     this.init();
   }
 
   Winpop.prototype = {
     init: function() {
       this.createDom();
       this.bindEvent();
     },
     createDom: function() {
       var body = jQuery("body"),
         ovl = jQuery("#J_WinpopBox");
 
       if (ovl.length === 0) {
         body.append(HTMLS.ovl);
       }
 
       this.set("ovl", jQuery("#J_WinpopBox"));
       this.set("mask", jQuery("#J_WinpopMask"));
     },
     bindEvent: function() {
       var _this = this,
         ovl = _this.get("ovl"),
         mask = _this.get("mask");
       ovl.on("click", ".J_AltBtn", function(e) {
         _this.hide();
       });
       ovl.on("click", ".J_CfmTrue", function(e) {
         var cb = _this.get("confirmBack");
         _this.hide();
         cb && cb(true);
       });
       ovl.on("click", ".J_CfmFalse", function(e) {
         var cb = _this.get("confirmBack");
         _this.hide();
         cb && cb(false);
       });
       mask.on("click", function(e) {
         _this.hide();
       });
       jQuery(document).on("keyup", function(e) {
         var kc = e.keyCode,
           cb = _this.get("confirmBack");;
         if (kc === 27) {
           _this.hide();
         } else if (kc === 13) {
           _this.hide();
           if (_this.get("type") === "confirm") {
             cb && cb(true);
           }
         }
       });
     },
     alert: function(str, btnstr) {
       var str = typeof str === 'string' ? str : str.toString(),
         ovl = this.get("ovl");
       this.set("type", "alert");
       ovl.find(".J_WinpopMain").html(str);
       if (typeof btnstr == "undefined") {
         ovl.find(".J_WinpopBtns").html(HTMLS.alert);
       } else {
         ovl.find(".J_WinpopBtns").html(btnstr);
       }
       this.show();
     },
     confirm: function(str, callback) {
       var str = typeof str === 'string' ? str : str.toString(),
         ovl = this.get("ovl");
       this.set("type", "confirm");
       ovl.find(".J_WinpopMain").html(str);
       ovl.find(".J_WinpopBtns").html(HTMLS.confirm);
       this.set("confirmBack", (callback || function() {}));
       this.show();
     },
     show: function() {
       this.get("ovl").show();
       this.get("mask").show();
     },
     hide: function() {
       var ovl = this.get("ovl");
       ovl.find(".J_WinpopMain").html("");
       ovl.find(".J_WinpopBtns").html("");
       ovl.hide();
       this.get("mask").hide();
     },
     destory: function() {
       this.get("ovl").remove();
       this.get("mask").remove();
       delete window.alert;
       delete window.confirm;
     }
   };
 
   var obj = new Winpop();
   window.alert = function(str) {
     obj.alert.call(obj, str);
   };
   window.confirm = function(str, cb) {
     obj.confirm.call(obj, str, cb);
   };
 })(window, jQuery);

然后实例化对象

var obj = new Winpop(); // 创建一个Winpop的实例对象
 // 覆盖alert控件
 window.alert = function(str) {
   obj.alert.call(obj, str);
 };
 // 覆盖confirm控件
 window.confirm = function(str, cb) {
   obj.confirm.call(obj, str, cb);
 };

以下JS不可少

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="winpop.js"></script>

以上所述就是本文的全部内容了,希望对大家能够有所帮助。

Javascript 相关文章推荐
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
微信小程序排坑指南详解
May 23 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
javascript异步处理工作机制详解
Apr 13 #Javascript
JavaScript中DOM详解
Apr 13 #Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 #Javascript
javascript中scrollTop详解
Apr 13 #Javascript
jQuery实现的在线答题功能
Apr 12 #Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 #Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 #Javascript
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
开办大学饮食联盟创业计划书
2014/01/29 职场文书
信息技术教学反思
2014/02/12 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
免职通知
2015/04/23 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers