一、自定义alert弹框知识点总结
-
利用requireJS实现模块化管理；
-
组合使用构造函数和原型模式实现弹框对象的创建；
- 巧妙利用命名空间实现换肤功能；
-
依赖jquery实现DOM操作；
-
依赖$.extend()方法实现对象的扩展，即实现默认参数和用户传入参数；
-
依赖jqueryUI实现弹框的拖动；
-
自定义事件的实现原理。
二、HTML代码(index.html)
自定义alert弹框
三、入口文件代码(main.js)
// 配置路径及别名 require.config({ baseUrl:'js', paths:{ jquery : 'jquery-1.9.1', jqueryUI : 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min' }}) // 初始化window弹框require(['jquery','window'],function($,w){ $('#btn').on('click',function(){ var win = new w.Window(); win.alert({ title : '提示', content : '换肤功能实现喽', btnText : '确定按钮', width : 500, height : 300, skinClassName : 'window_skin_a', hasMask : true, dragHandel : '.window_header', handlerSureBtn : function(){ alert('我是点击确定按钮后的回调...'); }, hasCloseBtn : true, handlerCloseBtn : function(){ alert('我是点击关闭按钮后的回调...'); } }); win.on('alert',function(){ alert('点击确定按钮事件01') }); win.on('alert',function(){ alert('点击确定按钮事件02') }); win.on('close',function(){ alert('点击关闭按钮事件01') }); win.on('close',function(){ alert('点击关闭按钮事件02') }); })})
四、弹框模块实现(window.js)
define(['jquery','jqueryUI'],function($,$UI){ var Window = function(){ this.config = { title : '系统消息', // 弹框的标题文字 content : '内容', // 弹框的内容问题 btnText : '确定', // 弹框的按钮文字 width : 800, // 弹框的宽度 height : 500, // 弹框的高度 handlerSureBtn : null, // 弹框的按钮触发的事件 hasCloseBtn : false, // 弹框中是否显示关闭按钮 handlerCloseBtn : null, // 弹框关闭按钮触发的事件 skinClassName : null, // 弹框换肤 hasMask : true, // 弹框遮罩 isDraggable : true, // 弹框是否可拖动 dragHandel : null // 弹框中拖动的'把手'：'.window_title' }; this.handlers = {}; // 弹框中的自定义事件集合 }; Window.prototype = { // 自定义事件 on : function(type, handler){ if( typeof this.handlers[type] == "undefined" ){ this.handlers[type] = []; } this.handlers[type].push(handler); }, fire : function(type, data){ if( this.handlers[type] instanceof Array ){ var handlers = this.handlers[type]; for( var i = 0; i < handlers.length; i++ ){ handlers[i](data); } } }, // 弹框事件 alert : function(cfg){ var that = this; var config = $.extend(this.config, cfg); // 弹框盒子 var boundingBox = $(' ' + ' ' + config.title + ' ' + ' ' + config.content + ' ' + ' ' + ' '); boundingBox.appendTo('body'); // 定制皮肤 if(config.skinClassName){ boundingBox.addClass(config.skinClassName); } //模态弹窗 if(config.hasMask){ var mask = $(' '); mask.appendTo('body'); } //拖动属性 if(config.isDraggable){ if(config.dragHandel){ boundingBox.draggable({handle:config.dragHandel}); }else{ boundingBox.draggable(); } } // 设置宽、高、坐标 boundingBox.css({ width: config.width, height: config.height, left: (config.x || (window.innerWidth - config.width)/2) + 'px', top: (config.y || (window.innerHeight - config.height)/2) + 'px' }) // 关闭按钮 if(config.hasCloseBtn){ var closeBtn = $(' X '); boundingBox.append(closeBtn); $('.closeBtn').on('click',function(){ // config.handlerCloseBtn && handlerCloseBtn(); that.fire('close'); boundingBox.remove(); mask && mask.remove(); }) } // 确定按钮点击事件 $('#btn_sure').on('click',function(){ // config.handlerSureBtn && config.handlerSureBtn(); that.fire('alert'); boundingBox.remove(); mask && mask.remove(); }) // 为关闭按钮添加'close'事件 if( config.handlerCloseBtn ){ this.on('close',config.handlerCloseBtn); } // 为确定按钮添加'alert'事件 if( config.handlerSureBtn ){ this.on('alert',config.handlerSureBtn); } } } return { Window : Window } })
五、CSS样式(window_alertBox.css)
*{ margin: 0; padding: 0;}html,body{ width: 100%; height: 100%;}body{ font: 14/1.5 normal 'Microsoft YaHei'; background-color: #fff;}/*默认样式*/.window_boundingBox{ background-color: #fff; width: 600px; height: 360px; border: 1px solid #4d99cb; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.3); position: fixed; overflow: hidden; z-index: 2;}.window_header{ color: #fff; width: 100%; background-color: #4d99cb; height: 36px; line-height: 36px; text-align: center;}.window_body{ padding: 10px;}.window_footer{ background-color: #dcdcdc; width: 100%; height: 36px; line-height: 36px; text-align: center; position: absolute; bottom: 0;}.closeBtn{ border-radius: 50%; cursor: pointer; width: 20px; height: 20px; padding: 2px; text-align: center; line-height: 20px; background-color: #fff; color: #333; position: absolute; right: 6px; top: 6px; color: #4d99cb;}.window_mask{ background-color: #000; opacity: 0.3; width: 100%; height: 100%; position: fixed; left: 0; top:0; z-index: 1;}/*定制皮肤*/.window_skin_a.window_boundingBox{ border: 1px solid red;}.window_skin_a .window_header{ background-color:red;}.window_skin_a .closeBtn{ color: red;}
参考：