#封裝彈框組件 ``` <style> *{ margin: 0; padding: 0; } .login{ width: 300px; height: 300px; background: white; border: 1px solid green; position: absolute; left: 0; top: 0; } .title{ height: 30px; line-height: 30px; background: gray; color: white; } .title .close{ float: right; padding-right: 10px; cursor: pointer; } </style> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div class="login"> <div class="title"> <span>標題</span><span class="close">關閉</span> </div> <div class="content"></div> </div> ``` ``` <style> *{ margin: 0; padding: 0; } .login{ background: white; border: 1px solid green; position: absolute; left: 0; top: 0; } .title{ height: 30px; line-height: 30px; background: gray; color: white; } .title .close{ float: right; padding-right: 10px; cursor: pointer; } </style> <script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); aInput[0].onclick = function () { var d1 = new Dialog(); d1.init({ // 配置參數 title: '登錄' }); }; aInput[1].onclick = function () { var d1 = new Dialog(); d1.init({ // 配置參數 w: 300, h: 400, dir: 'right', title: '公告' }); }; }; function Dialog() { this.oLogin = null; this.settings = { // 默認參數 w: 300, h: 300, dir: 'center', title: '' }; } Dialog.prototype.init = function (opt) { extend(this.settings, opt); this.create(); }; Dialog.prototype.create = function(){ var str = ''; this.oLogin = document.createElement('div'); this.oLogin.className = 'login'; str += '<div class="title">'; str += '<span>'+this.settings.title+'</span><span class="close">關閉</span>'; str += '</div>'; str += '<div class="content"></div>'; this.oLogin.innerHTML = str; document.body.appendChild(this.oLogin); this.setData(); }; Dialog.prototype.setData = function () { this.oLogin.style.width = this.settings.w + 'px'; this.oLogin.style.height = this.settings.h + 'px'; if(this.settings.dir == 'center'){ this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) / 2 + 'px'; this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) / 2 + 'px'; }else if(this.settings.dir == 'right'){ this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) + 'px'; this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + 'px'; } }; function extend(obj1, obj2) { for (var attr in obj2) { obj1[attr] = obj2[attr]; } } function viewWidth(){ return document.documentElement.clientWidth; } function viewHeight(){ return document.documentElement.clientHeight; } </script> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <!--<div class="login"> <div class="title"> <span>標題</span><span class="close">關閉</span> </div> <div class="content"></div> </div>--> ```