国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

betacat / 2797人閱讀

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

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

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

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

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

addEventListener():

classList():

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

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

代碼:




    
    彈框和遮罩層
    


    

        
我是頁面

        
我是遮罩層
            

                
標(biāo)題

                

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

最終效果圖:

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

點(diǎn)擊除了白色彈框任意位置:

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/116326.html

相關(guān)文章

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

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

    CoderDock 評(píng)論0 收藏0

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

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

    番茄西紅柿 評(píng)論0 收藏0

  • 遮罩層 彈框 頁面滾動(dòng)

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

    lily_wang 評(píng)論0 收藏0

  • 遮罩層 彈框 頁面滾動(dòng)

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

    Pluser 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<