前言
用js實現，彈窗彈出時需要有半透明的蒙層，位置需要根據彈窗的大小實現左右、垂直居中，對話方塊需要有標題欄（標題欄有關閉功能）、內容欄、操作按鈕欄，不能直接使用第三方ui庫。
回答完這道題目之後，我想說總結一下自己封裝的這個彈窗外掛程式，只是簡單的完成了部分功能，具體完整的功能，可以自行再新增~
源**：gist
主要使用方法：
頁面html結構：
1<
div
class
="modal"
id='modal'
>
2<
div
class
="modal-dialog"
>
3<
div
class
="modal-header"
>對話方塊標題<
a href
="#"
class
="close"
>×
a>
div>
4<
div
class
="modal-content"
>對話方塊的內容
div>
5<
div
class
="modal-controller"
>
6<
button
class
='btn-ok'
>確定
button
>
7<
button
class
='bnt-close
close'
>取消
button
>
8div
>
9div
>
10div
>
js呼叫方法：
1var modal=new modal(document.getelementbyid('modal'));2//
說明 ： 例項化彈窗外掛程式34
function
openmodal()7//
說明 ：modal.close();關閉彈窗
下面是詳細的指令碼解釋：
1 (function(window)7//
在modal的原型上實現close，open，init方法，實現方法的復用
8 modal.prototype.close=function
()11 modal.prototype.open=function
()14 modal.prototype.init=function
()25 },false
);26 }else
if(this
.$el.attachevent)else
34var target=e.target||e.srcelement;
35var classnames=target.classname.split(' ');
36if(classnames.indexof('close')!==-1)
39});40}
41}42 window.modal=modal;
43 })(window);
結束語
這個彈窗外掛程式使用了閉包，避免的全域性環境的汙染，只是給全域性環境新增了乙個modal物件，可實現任意多個modal物件的例項化，主要使用了原型+建構函式的方法構建物件。實現了公共方法的復用。如果有什麼不好的地方，歡迎指出~
如何實現乙個元件封裝
js前端元件的封裝方法 定義乙個類 類中增加乙個方法 body中定義乙個dom節點 指令碼中把dom節點和類定義結合起來 實現特定的元件功能 vue元件封裝 建立元件的模板，先把架子搭起來，寫寫樣式，考慮你的元件的基本邏輯 然後在引用得元件中 用import引入元件 通過component定義元件名...
手寫乙個彈窗元件 vue
最近的專案中，需要自己去手寫乙個全域性的彈窗元件，在下面貼出自己的 元件寫的比較簡單 notice.vue 自定義元件的掛載 這裡用了兩種不同的形式，考慮到不同的元件需要特定的方法，比如notice元件只能是乙個單例的模式，所以用了乙個notice.js給他掛載，其他通用的元件可以採用第二種方式進行...
如何封裝乙個彈窗元件，在以後的專案中都能使用
彈窗元件在vue中應用很廣，今天我就來給大家分享一下怎麼封裝的？首先，先建乙個資料夾，在src components下建立乙個toast資料夾，裡面放兩個檔案，乙個是index.js,乙個是toast.vue 以下是index.js裡面的 import toast from toast 建立obj物...