dialog 自創div
<div>

dialog 自創div 是一種用于在網頁中創建對話框的技術。它可以用來展示彈窗、提示框、確認框或其他需要與用戶進行交互的提示信息。通過使用自創的div元素和相關的CSS和JavaScript代碼，我們可以輕松地實現這些功能。

</div>
<div>

下面是幾個使用dialog 自創div的代碼案例，來詳細說明它的用法和功能。

</div>
<div>

案例一：彈窗

<code>
<div id="dialog" style="display: none;">
<p>這是一個彈窗</p>
<button onclick="closeDialog()">關閉</button>
</div>
<br>
<script>
function openDialog() {
document.getElementById("dialog").style.display = "block";
}
<br>
function closeDialog() {
document.getElementById("dialog").style.display = "none";
}
</script>
</code>

</div>
<div>

上面的代碼實現了一個簡單的彈窗。，我們通過設置display:none來隱藏了彈窗，然后定義了兩個JavaScript函數openDialog()和closeDialog()，分別用于顯示和隱藏彈窗。當點擊關閉按鈕時，會調用closeDialog()函數，使彈窗隱藏。

</div>
<div>

案例二：確認框

<code>
<div id="confirm-dialog" style="display: none;">
<p>確認要刪除該項嗎？</p>
<button onclick="confirmDelete()">確定</button>
<button onclick="cancelDelete()">取消</button>
</div>
<br>
<script>
function openConfirmDialog() {
document.getElementById("confirm-dialog").style.display = "block";
}
<br>
function confirmDelete() {
// 執行刪除操作
document.getElementById("confirm-dialog").style.display = "none";
}
<br>
function cancelDelete() {
document.getElementById("confirm-dialog").style.display = "none";
}
</script>
</code>

</div>
<div>

上面的代碼實現了一個確認框。當需要用戶確認某個操作時，可以調用openConfirmDialog()函數顯示確認框。當用戶點擊確定按鈕時，會調用confirmDelete()函數執行相應的操作，比如刪除某項內容；當用戶點擊取消按鈕時，會調用cancelDelete()函數關閉確認框。

</div>
<div>

案例三：自定義樣式

<code>
<div id="custom-dialog" class="my-dialog" style="display: none;">
<p>這是一個自定義樣式的彈窗</p>
<button onclick="closeCustomDialog()">關閉</button>
</div>
<br>
<style>
.my-dialog {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<br>
<script>
function openCustomDialog() {
document.getElementById("custom-dialog").style.display = "block";
}
<br>
function closeCustomDialog() {
document.getElementById("custom-dialog").style.display = "none";
}
</script>
</code>

</div>
<div>

上面的代碼展示了如何給彈窗添加自定義的樣式。通過添加一個class為my-dialog的div，并在相應的style標簽中定義其樣式，我們可以設置該彈窗的背景色、邊框和內邊距等屬性，使其呈現出我們想要的樣式。

</div>
<div>

通過使用dialog 自創div，我們可以方便地創建各種各樣的對話框，并根據需求自定義樣式和功能。無論是彈窗、確認框還是其他類型的對話框，都可以通過相應的CSS和JavaScript代碼來實現。它為網頁提供了更好的用戶交互體驗。

</div>