用原生js寫出一個彈框+遮罩層的頁面,完成彈框垂直居中頁面且點擊彈框外任何區域去掉彈框和遮罩層的功能

betacat 發布于2019-08-30 15:44 / 2789人閱讀

摘要：背景官網有個對話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現在的我可能要一個頁面寫一年目標用原生完成這個頁面彈框處于垂直居中狀態且點擊彈框外任意區域關閉彈框寫了很久很久時間就不說了遇到的最難的問題就是不知道怎么關閉彈框后面還

背景:Ant官網有個對話框Model組件.如圖:

如果哪天不能用框架了,不能用組件了.只能用原生寫頁面.. 現在的我可能要一個頁面寫一年

目標:用原生js完成這個頁面.彈框處于垂直居中狀態,且點擊彈框外任意區域關閉彈框.

寫了很久很久...時間就不說了...
遇到的最難的問題就是:不知道怎么關閉彈框.
后面還是問了旁邊的同事,教我用了document.querySelector()和.classList()還有addEventListener()
百度了一下它們的用法:
document.querySelector():

addEventListener():

classList():

我的理解是:先匹配對象,再設置監聽器.把設置了隱藏屬性的css代碼添加進去.最后利用stopPropagation()方法阻止彈框冒泡.
可能理解的不是很好..大概就是這個意思...
如果有對這幾個方法理解比較好的..可以留下評論給我參考一下..謝謝 - 0 -

附上最終代碼和結果圖:

代碼:

最終效果圖:

一進頁面的樣子:

點擊除了白色彈框任意位置:

云服務器 GPU云服務器彈框遮罩關于頁面彈框功能實現 js彈出一個遮罩層點擊彈出遮罩層

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116326.html

用原生js寫出一個彈框+遮罩層的頁面,完成彈框垂直居中頁面且點擊彈框外任何區域去掉彈框和遮罩層的功能

摘要：背景官網有個對話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現在的我可能要一個頁面寫一年目標用原生完成這個頁面彈框處于垂直居中狀態且點擊彈框外任意區域關閉彈框寫了很久很久時間就不說了遇到的最難的問題就是不知道怎么關閉彈框后面還背景:Ant官網有個對話框Model組件.如圖: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

CoderDock 2019-08-26 10:59 評論0 收藏0
簡單實現彈出彈框頁面背景半透明灰，彈框內容可滾動原頁面內容不可滾動的效果(JQuery)

摘要：當彈框彈出時原頁面內容不能滾動，即將樣式設為原頁面的內容就不會動了當彈框關閉后再將樣式改為默認的中的寫一個函數，再在彈框的中調用函數。彈出彈框效果展示實現原理 html結構比較簡單，即：遮罩層彈框先寫覆蓋顯示窗口的遮罩層div.box，因為要在整個窗口顯示固定，所以position要設為fixed，background設為灰色半透明，由于要遮住整個顯示屏，...

番茄西紅柿 2019-04-23 11:51 評論0 收藏0
遮罩層 彈框頁面滾動

摘要：第一種情況比較簡單，彈框和頁面都不可滾動第二種情況是彈框可滾動，頁面不可滾動移動端兼容性不好，可應用于端適用于移動端記錄開始滑動的坐標，用于判斷滑動方向未開始，已開始，滑動中核心部分判定一次就夠第一種情況比較簡單，彈框和頁面都不可滾動 this is a box this is a box this is a box ...

lily_wang 2019-08-29 16:27 評論0 收藏0
遮罩層 彈框頁面滾動

摘要：第一種情況比較簡單，彈框和頁面都不可滾動第二種情況是彈框可滾動，頁面不可滾動移動端兼容性不好，可應用于端適用于移動端記錄開始滑動的坐標，用于判斷滑動方向未開始，已開始，滑動中核心部分判定一次就夠第一種情況比較簡單，彈框和頁面都不可滾動 this is a box this is a box this is a box ...

Pluser 2019-08-26 12:15 評論0 收藏0