js實現自定義彈窗

click me

樣式部分:也放出來供參考，樣式可以根據自己的設計圖自行更改即可

彈出框最外層

*/.msg__wrap

/*彈出框頭部

*/.msg__wrap .msg-header .msg__wrap .msg-header .msg-header-close-button

/*彈出框中部

*/.msg__wrap .msg-body

/*圖示 */

.msg__wrap .msg-body .msg-body-icon.msg__wrap .msg-body .msg-body-icon div.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success::after.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong::after.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info::after

/*內容 */

.msg__wrap .msg-body .msg-body-content

/*彈出框底部

*/.msg__wrap .msg-footer .msg__wrap .msg-footer .msg-footer-btn .msg__wrap .msg-footer .msg-footer-cancel-button.msg__wrap .msg-footer .msg-footer-cancel-button:active.msg__wrap .msg-footer .msg-footer-confirm-button.msg__wrap .msg-footer .msg-footer-confirm-button:active

/*遮罩層

*/.msg__overlay

css

/*
*自定義彈窗 */
//自執行函式 形成封閉的作用域 避免全域性汙染 
//傳入windwo和document物件  相當於將window和document作為了作用域中的區域性變數，
//就不需要內部函式沿著作用域鏈再查詢到最頂層的window 提高執行效率。
(function
(window, document) 
//定義初始化方法 並對方法傳遞的引數進行初始化
msg.prototype =, //
內容樣式
contentfontsize = "1.5em", //
內容字型大小
btnname = ["確定", "取消"] //
按鈕文字內容
}) );
//繫結事件處理函式
this
._bind();
},//建立彈窗元素方法
_createlement() 
×` : "";
//判斷是否顯示圖示
const iconhtml = this.showicon ?`
` : "";
//判斷是否顯示彈窗底部按鈕
const footerhtml = this.footer ?`$$
` : "";
//拼接完整html
const innerhtml =`$
$                
$`;            
//將拼接的html賦值到wrap中
wrap.innerhtml =innerhtml;
//把自定義的樣式進行合併
const contentstyle =
//獲取內容所屬dom
let content = wrap.queryselector(".msg-body .msg-body-content");
//將傳過來的樣式新增到contentdom
for (const key in
contentstyle) 
}//給彈窗的conntent賦值
if (this
.usehtml)  
else
//建立遮罩層
let overlay = document.createelement("div");
overlay.classname = "msg__overlay";
//把dom掛載到當前例項上
this._overlay =overlay;
this._el =wrap;
},//彈窗展現方法
_show() )
},//關閉彈窗方法
_close() , 300);
},//事件處理函式，為dom繫結事件
_bind() );
}//確認彈窗
const confirm = (e) =>);
}//頂部關閉按鈕繫結事件
if (this
.header) 
//彈窗底部兩個按鈕事件監聽
if (this
.footer) }}
//將建構函式暴露到window  可直接在全域性作用域中訪問建構函式
window.$msg =msg;
})(window, document);

js到此，乙個完整的自定義彈窗元件已完成，只需要引入該js以及css或者直接把相關**加到自己的公共js中即可直接呼叫，注意，構造函式呼叫要用new.

下面是點選之後彈窗圖效果（gif動態圖）：

覺得不錯的，趕快動手試試吧。紙上得來終覺淺，絕知此事要躬行。

js實現自定義彈窗

用js自定義彈窗

swift 自定義彈窗

ionic ionicPopup 自定義彈窗

js實現自定義彈窗

用js自定義彈窗

swift 自定義彈窗

ionic ionicPopup 自定義彈窗

相關推薦