在前端開發中，經常要用到彈窗來向用戶展示信息，提示操作確認。其中，最常見的就是使用"confirm"函數來彈出一個確認對話框。然而，"confirm"函數的樣式和交互效果是無法定制的，不能滿足所有的需求。為了解決這個問題，我們可以使用div元素來模擬一個可自定義的確認對話框。

，我們先來看一個簡單的案例。下面的代碼會創建一個隱藏的div元素，當用戶點擊按鈕時，該div元素會顯示出來作為一個確認對話框：

<button onclick="showConfirm()">點擊顯示確認對話框</button>
<br>
    <div id="confirmDialog" style="display: none;">
<p>確定要進行操作嗎？</p>
<button onclick="confirmAction()">確定</button>
<button onclick="cancelAction()">取消</button>
</div>
<br>
    <script>
function showConfirm() {
document.getElementById("confirmDialog").style.display = "block";
}
<br>
      function confirmAction() {
alert("執行操作");
document.getElementById("confirmDialog").style.display = "none";
}
<br>
      function cancelAction() {
document.getElementById("confirmDialog").style.display = "none";
}
</script>

在上面的代碼中，我們創建了一個按鈕，并為按鈕添加了一個點擊事件觸發函數"showConfirm()"。在這個函數中，我們通過修改confirmDialog元素的display屬性，將其顯示出來。這樣，用戶點擊按鈕時，確認對話框就會彈出來。

確認對話框的樣式和內容是通過confirmDialog元素的HTML代碼來定義的。在這個案例中，我們只是簡單地添加了一個用于展示信息的

元素和兩個用于確認和取消操作的按鈕。當用戶點擊"確定"按鈕時，會觸發函數"confirmAction()"，這個函數會彈出一個提示框，然后隱藏確認對話框。當用戶點擊"取消"按鈕時，會觸發函數"cancelAction()"，這個函數只是簡單地隱藏確認對話框。

以上只是一個最基本的確認對話框，你可以根據需要來自定義樣式和內容。比如，你可以添加更多的HTML元素來展示更復雜的信息，或者使用CSS來美化對話框的樣式。還可以在確認和取消操作的回調函數中執行其他自定義的邏輯。

下面我們再來看一個稍微復雜一點的案例。在這個案例中，點擊的結果會根據用戶的選擇展示不同的提示：

<button onclick="showConfirm()">點擊顯示確認對話框</button>
<br>
    <div id="confirmDialog" style="display: none;">
<p>確定要刪除這個文件嗎？</p>
<button onclick="confirmDelete()">刪除</button>
<button onclick="cancelDelete()">取消</button>
</div>
<br>
    <script>
function showConfirm() {
document.getElementById("confirmDialog").style.display = "block";
}
<br>
      function confirmDelete() {
var result = confirm("真的要刪除這個文件嗎？");
if (result) {
alert("文件已刪除");
} else {
alert("取消刪除");
}
document.getElementById("confirmDialog").style.display = "none";
}
<br>
      function cancelDelete() {
document.getElementById("confirmDialog").style.display = "none";
}
</script>

在這個案例中，我們使用了"confirm"函數來彈出一個系統的確認對話框。當用戶點擊"刪除"按鈕時，會彈出這個系統的對話框來確認刪除操作，然后根據用戶的選擇展示不同的提示。當用戶點擊"取消"按鈕時，對話框只是簡單地隱藏。

通過以上兩個案例，我們可以看到使用div元素模擬確認對話框的基本原理。我們可以根據具體的需求來自定義樣式和內容，并通過JavaScript代碼來控制對話框的顯示和隱藏，并處理用戶的操作結果。使用這種自定義的對話框，我們可以更好地滿足需求，提升用戶體驗。