自訂對話框興奮

當然我們必須有一個自訂對話框！這有多有趣？

我為有興趣的人觀看了這個視頻，並且能夠相當輕鬆地處理該過程。

是如何完成的

首先，我們在 html 中建立一個結構。
當背景彈出時，我們可以使用覆蓋層來遮擋背景。我們還需要創建一個裡面有更多元素的盒子。這是一種方法：

也請注意新增了 onclick 事件的按鈕。

---

有趣的部分

使用 CSS 新增樣式來自訂您的新框：

創建我自己的對話框是非常令人興奮的。我喜歡擺弄按鈕、顏色和形狀。我很高興我花時間來解決這個問題。這是一個有趣的迷你項目！

---

設定功能

1. 建立一個自訂函數，在 JavaScript 中呈現 onclick 對話框。
2. 建立變數來定義大小並使用 ID 從 DOM 存取元素。
3. 一旦我們抓取了盒子元素，我們就可以將彈出的對話框居中，以視窗寬度為參考，除以2。

此對話方塊有三個區域，但您可以根據需要添加或減少內容。這裡真正的障礙是功能。

• 透過在每個唯一 ID 上使用 .innerHTML 動態地將資訊新增至框框。
• this.render 將渲染點擊資訊。
• alert.render 在 onclick 時被調用，從而觸發 customAlert 函數。

this.ok 函數確保當點擊「彈出」方塊中的按鈕時刪除覆蓋層和對話框。我們絕對需要那個。這是透過將兩者的樣式設為 none 來完成的。

---

太棒了 - 嘗試一下

我真的很高興這樣做 - 並且再次熬夜。 XD

以上是自訂對話框興奮的詳細內容。更多資訊請關注PHP中文網其他相關文章！