使用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 相关文章推荐
jquery ui resizable bug解决方法
Oct 26 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
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显示Facebook的粉丝数量方法
2014/01/08 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php实现微信公众号无限群发
2015/10/11 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
如何基于线程池提升request模块效率
2020/04/18 Python
一套SQL笔试题
2016/08/14 面试题
仓管岗位职责范本
2014/02/08 职场文书
国际贸易系求职信
2014/08/09 职场文书
个人融资协议书
2014/10/02 职场文书
建筑横幅标语
2014/10/09 职场文书
公司内部升职自荐信
2015/03/27 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
2019大学生实习报告
2019/06/21 职场文书
html中两种获取标签内的值的方法
2022/06/16 jQuery