一、需求分析 開發過程中彈窗是必不可少的，如果我們每次需要彈窗都要重新開發，既浪費了人力又影響了性能，那麼組件是不錯的選擇。 二、先寫樣式 <style> * { margin: 0; padding: 0; } .login { background: #fff; border: 1px soli ...
一、需求分析
開發過程中彈窗是必不可少的，如果我們每次需要彈窗都要重新開發，既浪費了人力又影響了性能，那麼組件是不錯的選擇。
二、先寫樣式
<style>
* { margin: 0; padding: 0; } .login { background: #fff; border: 1px solid #000; position: absolute; left: 0; top: 0; } .title { width: 100%; height: 30px; background: #333; color: #fff; } .title .close { display: block; float: right; } </style>*對應的 html標簽如下，先註釋掉，一會動態加進body。
<!-- <div class="login"> <div class="title"> <span>111</span><span class="close">X</span> </div> <div class="content"></div> </div> -->三、body的內容
<input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3">四、腳本
<script> window.onload = function() { var aInput = document.getElementsByTagName('input'); aInput[0].onclick = function() { var d1 = new Dialog(); d1.init(); // 這裡走預設配置 } aInput[1].onclick = function() { var d1 = new Dialog(); d1.init({ dir: 'right' // 自定義配置 }); } } function Dialog() { this.oLogin = null; this.settings = { // 預設配置 w: 300, h: 300, dir: 'center' } } Dialog.prototype.init = function(opt) { extend(this.settings, opt); this.create(); } Dialog.prototype.create = function() { this.oLogin = document.createElement('div'); this.oLogin.className = 'login'; this.oLogin.innerHTML = `<div class="title"> <span>111</span><span class="close">X</span> </div> <div class="content"></div>`; 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>五、運行效果圖
點擊第一個按鈕彈出中間的彈窗；
點擊第二個按鈕彈出右下角的彈窗；
