js怎么弄确认取消的提示框

一、直接回答

使用JavaScript创建确认取消的提示框可以通过confirm()方法、结合自定义弹窗实现更复杂的功能、利用第三方库如SweetAlert2提供更多样化的设计。 为了详细说明其中的一个点，这里重点介绍confirm()方法的使用，它是原生JavaScript提供的简单而有效的解决方案。confirm()方法会显示一个带有指定消息的对话框，其中包含“确定”和“取消”按钮。用户点击按钮后，会返回一个布尔值：如果点击“确定”返回true，点击“取消”返回false。

二、详细内容

1、原生JavaScript的`confirm()`方法

confirm()方法是最简单的实现方式，适用于大部分基本需求。在网页中执行以下代码，可以弹出一个确认取消的提示框。

if (confirm("你确定要继续吗？")) {
    // 用户点击了“确定”
    console.log("用户选择了确定");
} else {
    // 用户点击了“取消”
    console.log("用户选择了取消");
}

1.1、基本用法

confirm()方法会暂停代码的执行，直到用户做出选择。它是同步的，这意味着在用户点击按钮之前，代码不会继续执行。

function showConfirm() {
    if (confirm("你确定要删除这条记录吗？")) {
        // 用户点击“确定”
        console.log("记录已删除");
    } else {
        // 用户点击“取消”
        console.log("操作已取消");
    }
}

1.2、结合事件处理

在实际应用中，我们通常会将confirm()方法与事件处理函数结合使用。

<button onclick="deleteRecord()">删除记录</button>
<script>
function deleteRecord() {
    if (confirm("你确定要删除这条记录吗？")) {
        // 执行删除操作
        console.log("记录已删除");
    } else {
        // 取消删除操作
        console.log("操作已取消");
    }
}
</script>

2、自定义确认取消提示框

虽然confirm()方法非常方便，但它在样式上有一定的局限性。如果需要自定义样式和功能，可以使用HTML、CSS和JavaScript创建自定义的确认取消提示框。

2.1、HTML结构

首先，创建一个包含模态框的HTML结构。

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>你确定要继续吗？</p>
        <button id="confirmBtn">确定</button>
        <button id="cancelBtn">取消</button>
    </div>
</div>

2.2、CSS样式

然后，添加一些CSS样式来美化模态框。

.modal {
    display: none; /* 隐藏模态框 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 置于顶层 */
    left: 0;
    top: 0;
    width: 100%; /* 全屏宽度 */
    height: 100%; /* 全屏高度 */
    overflow: auto; /* 启用滚动 */
    background-color: rgb(0,0,0); /* 背景颜色 */
    background-color: rgba(0,0,0,0.4); /* 背景颜色透明度 */
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 中心对齐 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 宽度 */
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

2.3、JavaScript功能

最后，使用JavaScript来控制模态框的显示和隐藏。

var modal = document.getElementById("myModal");
var confirmBtn = document.getElementById("confirmBtn");
var cancelBtn = document.getElementById("cancelBtn");
var span = document.getElementsByClassName("close")[0];
function showModal() {
    modal.style.display = "block";
}
confirmBtn.onclick = function() {
    modal.style.display = "none";
    console.log("用户选择了确定");
}
cancelBtn.onclick = function() {
    modal.style.display = "none";
    console.log("用户选择了取消");
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

3、使用第三方库SweetAlert2

如果希望实现更复杂的功能和更美观的界面，可以使用第三方库，例如SweetAlert2。

3.1、引入SweetAlert2

首先，需要引入SweetAlert2的CSS和JavaScript文件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

3.2、使用SweetAlert2显示确认取消提示框

使用SweetAlert2，只需几行代码即可实现一个美观的确认取消提示框。

Swal.fire({
    title: '你确定要继续吗？',
    text: "此操作无法撤销！",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
}).then((result) => {
    if (result.isConfirmed) {
        console.log("用户选择了确定");
    } else {
        console.log("用户选择了取消");
    }
});

3.3、SweetAlert2的更多功能

SweetAlert2提供了丰富的功能，包括自定义按钮、输入框、动画效果等，可以根据需求进行调整和扩展。

Swal.fire({
    title: '请输入你的名字',
    input: 'text',
    inputAttributes: {
        autocapitalize: 'off'
    },
    showCancelButton: true,
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    showLoaderOnConfirm: true,
    preConfirm: (name) => {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(name)
            }, 2000)
        })
    },
    allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
    if (result.isConfirmed) {
        Swal.fire({
            title: `欢迎, ${result.value}`
        });
    }
});

三、总结

通过上述方法，我们可以在JavaScript中实现不同类型的确认取消提示框，包括使用confirm()方法、结合自定义弹窗实现更复杂的功能、利用第三方库如SweetAlert2提供更多样化的设计。每种方法都有其优势和适用场景，开发者可以根据具体需求选择最合适的解决方案。在实际应用中，还可以结合项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile来实现更高效的团队协作和任务管理。