DAY 24 JavaScript對話框介紹

2023 iThome 鐵人賽

DAY 24

Modern Web

關於學習網頁這檔事系列第 24 篇

15th鐵人賽

SHAO

團隊NUTC_IMAC_WEB_桑貝比

2023-10-09 13:12:35

722 瀏覽

分享至

JavaScript對話框是一種用於在網頁上顯示消息、接收用戶輸入、警告用戶或確認操作的互動元素。它們以視窗形式出現，可用於各種網頁應用程序，從簡單的警告消息到複雜的表單輸入驗證。

JavaScript對話框通常有三種主要類型：

1.警告框（Alert）：用於向用戶顯示重要消息或警告，通常包含一個“確定”按鈕。

window.alert("這是一個警告消息！");

2.確認框（Confirm）：用於確認用戶是否同意執行某項操作，包含“確定”和“取消”兩個選項。

if (window.confirm("確定要刪除這個項目嗎？")) {
    // 用戶選擇確定
    // 執行刪除操作
} else {
    // 用戶選擇取消
    // 不執行刪除操作
}

3.提示框（Prompt）：用於接收用戶輸入，通常包含一個輸入框、“確定”和“取消”兩個按鈕。

const userInput = window.prompt("請輸入您的名稱：", "預設名稱");
if (userInput !== null) {
    // 用戶輸入了名稱
    // 執行相應操作
} else {
    // 用戶點擊了取消
    // 不執行操作
}

自定義確認框

<!DOCTYPE html>
<html>
<head>
    <title>自定義確認框</title>
    <style>
        .custom-dialog {
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }
        .btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="showCustomConfirm()">自定義確認框</button>

    <div id="customDialog" class="custom-dialog" style="display: none;">
        <p>確定要刪除這個項目嗎？</p>
        <button class="btn" onclick="confirmAction()">確定</button>
        <button class="btn" onclick="cancelAction()">取消</button>
    </div>

    <script>
        function showCustomConfirm() {
            document.getElementById('customDialog').style.display = 'block';
        }

        function confirmAction() {
            // 執行確定操作
            document.getElementById('customDialog').style.display = 'none';
        }

        function cancelAction() {
            // 取消操作
            document.getElementById('customDialog').style.display = 'none';
        }
    </script>
</body>
</html>