HTML JavaScript 确认弹窗替换为是、否按钮而不是确定和取消

在本文中，我们将介绍如何使用 HTML 和 JavaScript 来替换确认弹窗中的默认 OK 和 Cancel 按钮为 Yes 和 No 按钮。

阅读更多：HTML 教程

什么是确认弹窗？

确认弹窗是一种常见的 JavaScript 弹窗，用于向用户展示一个确认消息，并接受用户的选择。默认情况下，确认弹窗使用 OK 和 Cancel 按钮，以获取用户的确认或取消操作。

<script>
    function confirmAction() {
        var result = confirm("Are you sure?");
        if (result == true) {
            // 用户点击了确认按钮
            // 执行相应的操作
        } else {
            // 用户点击了取消按钮
            // 执行相应的操作
        }
    }
</script>

上述代码中的 confirm() 函数用于显示一个确认弹窗，并返回用户的选择结果。如果用户点击了确认按钮，result 变量将被赋值为 true，否则为 false。

替换确认弹窗按钮

默认的确认弹窗使用 OK 和 Cancel 按钮，但在某些情况下，我们希望使用更明确的 Yes 和 No 按钮，以提高用户理解和操作的准确性。

要替换确认弹窗中的按钮，我们可以使用自定义的 HTML 和 CSS 样式来创建一个模拟的确认弹窗，并使用 JavaScript 来捕获用户的选择。

首先，我们需要在 HTML 中创建一个隐藏的 div 元素，并添加 Yes 和 No 按钮：

<div id="custom-confirm" class="hidden">
    <p>Are you sure?</p>
    <button onclick="confirmYes()">Yes</button>
    <button onclick="confirmNo()">No</button>
</div>

上述代码中的按钮分别调用了 confirmYes() 和 confirmNo() 函数，用于处理用户点击 Yes 和 No 按钮的操作。

接下来，我们需要使用 CSS 来隐藏默认的确认弹窗，并将自定义的确认弹窗样式应用到页面中：

<style>
    .hidden {
        display: none;
    }
</style>

最后，我们使用 JavaScript 来显示和隐藏自定义的确认弹窗，并根据用户的选择执行相应的操作：

<script>
    function confirmAction() {
        var customConfirm = document.getElementById("custom-confirm");
        customConfirm.classList.remove("hidden");

        var confirmYes = document.getElementById("confirm-yes");
        var confirmNo = document.getElementById("confirm-no");

        confirmYes.onclick = function() {
            // 用户点击了 Yes 按钮
            // 执行相应的操作
            customConfirm.classList.add("hidden");
        };

        confirmNo.onclick = function() {
            // 用户点击了 No 按钮
            // 执行相应的操作
            customConfirm.classList.add("hidden");
        };
    }
</script>

上述代码中的 confirmAction() 函数被调用时，首先通过 getElementById() 方法获取自定义确认弹窗的 DOM 元素，然后将其移除隐藏样式，显示确认弹窗。

接着，我们为 Yes 和 No 按钮添加点击事件监听器，并在用户点击按钮时执行相应的操作。最后，通过添加隐藏样式，将确认弹窗重新隐藏。

使用上述的 HTML、CSS 和 JavaScript 代码，我们可以替换默认的确认弹窗按钮为 Yes 和 No 按钮，并根据用户的选择执行相对应的操作。

总结

通过使用 HTML、JavaScript 和 CSS，我们可以替换确认弹窗中默认的 OK 和 Cancel 按钮为更明确的 Yes 和 No 按钮。通过创建自定义的确认弹窗，并使用 JavaScript 监听用户的选择，我们可以根据用户的操作进行相应的处理。这种替换确保了用户可以清楚地理解和操作确认弹窗，提高了用户交互的准确性和易用性。

希望本文对您理解如何替换确认弹窗按钮有所帮助！