组件是对面向对象的加深应用（开发UI组件，功能组件）将 配置参数、方法、事件，三者进行分离
window.onload = function() { var aBtn = document.getElementsByTagName('input'); //显示在中间，用默认参数即可 aBtn[0].onclick = function() { //alert(1); var d1 = new Dialog(); d1.init({ //配置参数 iNow: 0, title: '登陆框' }); } //显示在右下角的公告栏 aBtn[1].onclick = function() { var d1 = new Dialog(); d1.init({ //配置参数 iNow: 1, w: 100, h: 400, dir: 'right_bottom', title: '公告框' }); } //显示在中间，并且有遮罩 aBtn[2].onclick = function() { var d1 = new Dialog(); d1.init({ //配置参数 iNow: 2, w: 400, h: 400, dir: 'center', title: '遮罩框', mask: true }); } } function Dialog() { //构造函数 this.oDiv = null; this.omask = null; this.setting = { //默认参数 w: 300, h: 300, dir: 'center', title: '', mask: false } } Dialog.prototype.json = { }//传入json，函数接受一个参数 function extend(obj1, obj2) { //配置参数方法 for(var i in obj2) { obj1[i] = obj2[i]; } } Dialog.prototype.init = function(opt) { //构建方法 extend(this.setting, opt);//替换默认参数 if(this.json[opt.iNow] == undefined) { this.json[opt.iNow] = true; } if(this.json[opt.iNow]) { this.create(); this.setData(); this.close(); if(this.setting.mask) { this.mask(); } this.json[opt.iNow] = false; } } Dialog.prototype.create = function() { //构建方法实现创建节点 this.oDiv = document.createElement('div'); this.oDiv.className = 'login'; this.oDiv.innerHTML = '<div class="title"><span>' + this.setting.title + '</span><span class="close">X</span></div><div class="content">内容</div>'; document.body.appendChild(this.oDiv); } Dialog.prototype.setData = function() { //构建方法设置配置参数 this.oDiv.style.width = this.setting.w + 'px'; this.oDiv.style.height = this.setting.h + 'px'; if(this.setting.dir == 'center') { this.oDiv.style.left = (viewWidth() - this.oDiv.offsetWidth) / 2 + 'px'; this.oDiv.style.top = (viewHeight() - this.oDiv.offsetHeight) / 2 + 'px'; } else if(this.setting.dir == 'right_bottom') { this.oDiv.style.left = (viewWidth() - this.oDiv.offsetWidth) + 'px'; this.oDiv.style.top = (viewHeight() - this.oDiv.offsetHeight) + 'px'; } } Dialog.prototype.close = function() { //构建方法：关闭弹窗 var _this = this; var oClose = this.oDiv.getElementsByTagName('span')[1]; oClose.onclick = function() { document.body.removeChild(_this.oDiv); if(_this.setting.mask) { document.body.removeChild(_this.omask); } _this.json[_this.setting.iNow] = true; } } Dialog.prototype.mask = function() { this.omask = document.createElement('div'); this.omask.className = 'mask'; document.body.appendChild(this.omask); this.omask.style.width = viewWidth() + 'px'; this.omask.style.height = viewHeight() + 'px'; } function viewWidth() { return document.documentElement.clientWidth; } function viewHeight() { return document.documentElement.clientHeight; }
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .login { border: 1px solid #d8d8d8; position: absolute; z-index: 2; } .login .title { height: 40px; background: #d8d8d8; } .login .title .close { float: right; cursor: pointer; } .login .content { background: #fff; } .mask { position: absolute; left: 0; top: 0; z-index: 1; background: rgba(0, 0, 0, 0.6); } </style> <script type="text/javascript" src="js/myAlert.js"></script> </head> <body> <input type="button" name="" id="" value="登陆框" /> <input type="button" name="" id="" value="公告框" /> <input type="button" name="" id="" value="遮罩框" /> <!--<div class="login"> <div class="title"> <span>登陆框</span> <span class="close">X</span> </div> <div class="content"> 内容 </div> </div>--> <!--<div class="mask"></div>--> </body> </html>