執行后的結果：

點擊按鈕出現模態框，點擊x按鈕模態框消失

?

?初始打開就會有一個按鈕在我們的靜態頁面，那我們是不是應該在body里面寫一個button

?點擊button出現模態框

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

2、分析這個模態框，需要創建三個div，給他們增加樣式。點擊button后出現模態框（模態框總體樣式和點擊按鈕代碼）

?

?

?

?3、關閉模態框，點擊x(cancelBut)就把模態框remove掉（cancel樣式和點擊cancel代碼）

?

?

?4、這樣就完成了彈出模態框和關閉模態框，但是有一個bug，如果我們沒有關閉模態框繼續點擊按鈕，他就會一直產生模態框，那我們就要給他設置一個判斷是否已經出現模態框，怎么判斷呢？

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。