JavaScript封裝自己的一個彈窗，是雙按鈕的，比較簡單一些 ，其中引用了jQuery來寫的方法，最後暴露出去，有更好的建議歡迎評論 。。。。
阿新 • • 發佈：2019-01-06
$(function(){ // 設定自執行函式 (function(jQuery){ // 定義建構函式 var Popup = function (title,text,fn) { this.title = title || '提示'; this.text = text || '你要提示什麼呢？'; this.fn = fn || ''; this.toast(); } // 設定html Popup.html= `<div class="mask"> <div class="tips_box"> <div class="top"> <div class="title">提示</div> <div class="clear">X</div> </div> <div class="center"> <p>你是打算顯示什麼給使用者呢？</p> </div> <div class="btn_box"> <div class="sure">確定</div> <div class="cancel">取消</div> </div> </div> </div>` //給構造原型新增方法 Popup.prototype = { constructor: Popup, toast: function (){ if(this.isExist()){ $('.mask').show() }else { $('body').append(Popup.html) } this.setText(this.title,this.text); this.setFn(this.fn); }, // 判斷彈窗是否存在 isExist: function(){ return $('.mask').length; }, // 定義提示文字 setText: function (title,text) { $('.mask').find('.title').html(title).end().find('p').html(text) },// 註冊定義的事件 setFn: function(backCall) { $('.mask').find('.clear,.cancel').click(function(){ $('.mask').hide() }) // $('.mask').find('.sure').off('click') $('.mask').find('.sure').click(function(){ $('.mask').hide(); // Popup.prototype.tips() // setTimeout(()=>{ // Popup.prototype.tips().hide() // }) backCall(); }) }, // tips: function(){ // return `<div class="tips"> // 點選了確定按鈕 // </div>` // } } // 暴露出去 window.Popup = Popup; }($)) })
以上是js程式碼，使用了自執行函式，通過建構函式來封裝方法，進而單獨分開
css的程式碼：
.mask { width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, .5); left:0; top: 0; } .mask .tips_box { width: 400px; height: 240px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .tips_box .top { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #000; } .tips_box .top .clear { position: absolute; right: 40px; width: 30px; height: 30px; border: 1px solid #aaa; border-radius: 50%; line-height: 30px; text-align: center; } .tips_box .top .title { font-size: 20px; color: #333; } .mask .tips_box .center { text-align: center; width: 100%; height: 100px; border-bottom: 1px solid #000; } .mask .tips_box .btn_box { width: 100%; height: 60px; display: flex; justify-content: space-around; box-sizing: border-box; padding: 10px 30px; } .tips_box .btn_box .sure, .tips_box .btn_box .cancel { width: 100px; line-height: 40px; text-align: center; font-size: 16px; color: green; border: 1px solid #000; } .tips_box .btn_box .cancel { color: #333; } .tips { width: 200px; line-height: 30px; text-align: center; border: 1px solid rgba(0,0,0,.4); border-radius: 8px; color: rgba(0,0,0,.6); position: absolute; top: 60px; left: 50%; transform: translateX(-50%); animation: all 0.5s; display: none; } /* html {font-size: 62.5%; 10 ÷ 16 × 100% = 62.5%} */
其中引用了jQuery這裡的話，自己去引一個就好了，不多講了
在新的頁面中直接呼叫js最後暴露的方法即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>彈窗</title> <link rel="stylesheet" href="./popup.css"> </head> <body> <button class="btn1">彈窗1</button> <button class="btn2">彈窗2</button> <div class="tips"> 點選了確定按鈕 </div> </body> </html> <script src="./jquery.js"></script> <script src="./popup.js"></script> <script> $(function(){ $('.btn1').click(function(){ console.log('1111') new Popup('溫馨提示','你想搞什麼啊？',function(){ // alert('1111') $('.tips').show() setTimeout(() => { $('.tips').hide() }, 1000); }) }) }) </script>