亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

CoderDock / 2472人閱讀

摘要：背景官網(wǎng)有個對話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現(xiàn)在的我可能要一個頁面寫一年目標(biāo)用原生完成這個頁面彈框處于垂直居中狀態(tài)且點擊彈框外任意區(qū)域關(guān)閉彈框?qū)懥撕芫煤芫脮r間就不說了遇到的最難的問題就是不知道怎么關(guān)閉彈框后面還

背景:Ant官網(wǎng)有個對話框Model組件.如圖:

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

目標(biāo):用原生js完成這個頁面.彈框處于垂直居中狀態(tài),且點擊彈框外任意區(qū)域關(guān)閉彈框.

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

addEventListener():

classList():

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

附上最終代碼和結(jié)果圖:

代碼:




    
    彈框和遮罩層
    


    

        
我是頁面

        
我是遮罩層
            

                
標(biāo)題

                

                
今天學(xué)習(xí)原生js

最終效果圖:

一進(jìn)頁面的樣子:

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106929.html

相關(guān)文章

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

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

    betacat 評論0 收藏0

  • 簡單實現(xiàn)彈出彈框頁面背景半透明灰，彈框內(nèi)容可滾動原頁面內(nèi)容不可滾動的效果(JQuery)

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

    番茄西紅柿 評論0 收藏0

  • 遮罩層 彈框 頁面滾動

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

    lily_wang 評論0 收藏0

  • 遮罩層 彈框 頁面滾動

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

    Pluser 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<