自定義訊息提示框
阿新 • • 發佈：2018-10-31
使用原生JavaScript簡單封裝的一個訊息提示模態框，如果誰有更好的方式可以分享，謝謝！
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* 彈窗message-dialog樣式開始*/ a { text-decoration: none; } .message-dialog { font-size: 1rem; position: relative; } /* 遮罩樣式 */ .message-dialog-conver { width: 100%; height: 100%; z-index:100; background: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; opacity: 0.3; text-align: end; } /* 主體樣式 */ .message-dialog-main { position: fixed; display: flex; justify-content: center; flex-direction: column; align-items: center; top: 50%; z-index: 200; width: 100%; left: 100%; -webkit-transform: translate(-100%, -100%); -moz-transform: translate(-100%, -100%); -ms-transform: translate(-100%, -100%); -o-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } /* 標題樣式 */ .message-dialog-header { display: flex; justify-content: center; align-content: center; text-align: center; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 255); width: 86%; height: 2rem; line-height: 2rem; border-top-left-radius: 0.6rem; border-top-right-radius: 0.6rem; } /* 內容樣式 */ .message-dialog-content { display: flex; justify-content: center; align-content: center; text-align: center; width: 86%; background: rgba(255, 255, 255, 255); padding: 0.5rem 0; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3) } /* 底部樣式 */ .message-dialog-footer { width: 86%; height: 2.5rem; } .message-dialog-btn { width: 100%; height: 100%; background: rgba(255, 255, 255, 255); border-bottom-left-radius: 0.6rem; border-bottom-right-radius: 0.6rem; border-top: 0.01rem solid #d5d6d7; display: flex; justify-content: center; text-align: center; align-content: center; align-items: center; } .message-dialog-sure, .message-dialog-cancel { display: block; width: 10%; text-align: center; cursor: pointer; height: 2rem; line-height: 2rem; border-radius: 0.3rem; margin: 0 1rem; color: #ffff; border: none; letter-spacing: .6px; background-color: #d6d6d6; } .message-dialog-sure { color: #212122; border: none; background-color: #449d44; } .message-dialog-close { cursor: pointer; color: #347d4a; height: 2rem; line-height: 2rem; text-align: center; } </style> </head> <body> <button type="button" onclick="show()">彈出</button> <!-- <div class="message-dialog"> <div class="message-dialog-conver">遮罩</div> <div class="message-dialog-main"> <div class="message-dialog-header">標題</div> <div class="message-dialog-content">內容</div> <div class="message-dialog-footer"> <div class="message-dialog-btn"> <a href="#">關閉</a> <a>關閉</a> </div> </div> </div> </div> --> <div id="message"></div> <script> var messageDialog = { showMessage: function(options, autoHide) { this.timers = []; this.options = options || {}; this.autoHide = autoHide || false; var isShow = this.options.isShow || false; var width = this.options.width || 86; var topDistance = this.options.topDistance || 50; var leftDistance = this.options.leftDistance || 93; var btn_width = this.options.btnWidth || 10; var sure = this.options.isSure || false; var html = '<div class="message-dialog-conver"></div>\ <div class="message-dialog-main">\ <div class="message-dialog-header">' + this.options.title + '</div>\ <div class="message-dialog-content">' + this.options.content + '</div>\ <div class="message-dialog-footer">\ <div class="message-dialog-btn">\ <!--<a class="message-dialog-sure">確定</a>-->\ <!--<a class="message-dialog-cancel">取消</a>-->\ </div>\ </div>\ </div>'; //1.0 建立元素 var element = document.createElement('div'); element.setAttribute('class', "message-dialog"); //2.0 插入元素 element.innerHTML = html; //2.1 設定彈出框的大小 element.querySelector(".message-dialog-main").style.width = width + '%'; element.querySelector(".message-dialog-main").style.top = topDistance + '%'; element.querySelector(".message-dialog-main").style.left = leftDistance + '%'; //2.2 是否需要插入確認或關閉按鈕 if (sure) { var sureElement = document.createElement('a'); sureElement.setAttribute('class', 'message-dialog-sure'); // sureElement.setAttribute('href', '#'); sureElement.innerHTML = '確定'; element.querySelector(".message-dialog-btn").appendChild(sureElement); var cancelElement = document.createElement('a'); cancelElement.setAttribute('class', 'message-dialog-cancel'); cancelElement.innerHTML = '取消'; element.querySelector(".message-dialog-btn").appendChild(cancelElement); } else { var closeElment = document.createElement('a'); closeElment.setAttribute('class', 'message-dialog-close'); closeElment.innerHTML = '關閉'; element.querySelector(".message-dialog-btn").appendChild(closeElment); } //2.3 設定按鈕的長度 var array = element.querySelectorAll(".message-dialog-btn a"); for (var key in array) { if (!array.hasOwnProperty(key)) { continue; } var item = array[key]; item.style.width = btn_width + '%'; } //3.0 插入到頁面並顯示 if (this.options.el) { var ele = document.getElementById(this.options.el); if (ele) { document.getElementById(this.options.el).appendChild(element); } else { document.getElementsByTagName("body")[0].appendChild(element); } } else { document.getElementsByTagName("body")[0].appendChild(element); } //4.0 是否顯示 if (!isShow) { element.style.display = "none"; } //5.0 繫結事件 if (element.querySelector('.message-dialog-sure') && element.querySelector('.message-dialog-cancel')) { element.querySelector('.message-dialog-sure').onclick = element.querySelector('.message-dialog-cancel').onclick = this.enventsFunc.bind("", this, element); } else { element.querySelector('.message-dialog-close').onclick = this.enventsFunc.bind("", this, element); } return this; }, show: function() { this.cleartimers(); this.options.isShow = true; document.querySelector('.message-dialog').style.display = 'block'; if (this.autoHide) { var t = setTimeout(() => { this.hide(); }, this.options.timeout || 3000); this.timers.push(t); } return this; }, hide: function() { this.cleartimers(); this.options.isShow = false; document.querySelector('.message-dialog').style.display = 'none'; if (this.options.el) { var ele = document.getElementById(this.options.el); if (ele) { document.getElementById(this.options.el).removeChild(document.querySelector('.message-dialog')); } else { document.getElementsByTagName("body")[0].removeChild(document.querySelector('.message-dialog')); } } else { document.getElementsByTagName("body")[0].removeChild(document.querySelector('.message-dialog')); } }, enventsFunc: function(e, doc, target) { var thisEvent = target.target; if (thisEvent.classList.contains("message-dialog-sure")) { e.options.confirm(); } if (thisEvent.classList.contains("message-dialog-cancel")) { e.options.cancel(); } e.hide(); return false; }, cleartimers: function() { if (this.timers && this.timers.length > 0) { for (var index = 0; index < this.timers.length; index++) { var timer = this.timers[index]; if (timer) { window.clearTimeout(timer); } } } } }; function show() { messageDialog.showMessage({ el: "message", title: "資訊提示", content: "錯誤訊息", btnWidth: 30, width: 30, topDistance: 50, leftDistance: 65, isSure: false, timeout: 3000, confirm: function() { alert("1234"); }, cancel: function() {}, }, false).show(); } </script> </body> </html>