執(zhí)行后的結(jié)果：

點(diǎn)擊按鈕出現(xiàn)模態(tài)框，點(diǎn)擊x按鈕模態(tài)框消失

?

?初始打開(kāi)就會(huì)有一個(gè)按鈕在我們的靜態(tài)頁(yè)面，那我們是不是應(yīng)該在body里面寫(xiě)一個(gè)button

?點(diǎn)擊button出現(xiàn)模態(tài)框

1、我們先要獲取button，獲取button的方式有很多種，就選一種比較簡(jiǎn)單的let but =document.querySelector("button")；來(lái)保存一下

2、分析這個(gè)模態(tài)框，需要?jiǎng)?chuàng)建三個(gè)div，給他們?cè)黾訕邮健｜c(diǎn)擊button后出現(xiàn)模態(tài)框（模態(tài)框總體樣式和點(diǎn)擊按鈕代碼）

?

?

?

?3、關(guān)閉模態(tài)框，點(diǎn)擊x(cancelBut)就把模態(tài)框remove掉（cancel樣式和點(diǎn)擊cancel代碼）

?

?

?4、這樣就完成了彈出模態(tài)框和關(guān)閉模態(tài)框，但是有一個(gè)bug，如果我們沒(méi)有關(guān)閉模態(tài)框繼續(xù)點(diǎn)擊按鈕，他就會(huì)一直產(chǎn)生模態(tài)框，那我們就要給他設(shè)置一個(gè)判斷是否已經(jīng)出現(xiàn)模態(tài)框，怎么判斷呢？

?

?

?

總結(jié)

以上是生活随笔為你收集整理的js编写弹出模态框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。