js怎么写删除提示框

要在JavaScript中实现删除提示框，你可以使用 window.confirm 方法来创建一个简单的确认对话框。 用户在确认对话框中可以选择“确定”或“取消”，根据用户的选择来执行相应的操作。以下是详细步骤和代码示例来实现这一功能。

一、基本实现方法

使用 window.confirm 方法

要创建一个删除确认对话框，你可以使用 window.confirm 方法。这个方法会返回一个布尔值，true 表示用户点击了“确定”，false 表示用户点击了“取消”。

function confirmDelete() {
    if (window.confirm("你确定要删除这条记录吗？")) {
        // 用户点击了“确定”按钮
        console.log("记录已删除");
        // 在这里执行删除操作
    } else {
        // 用户点击了“取消”按钮
        console.log("取消删除");
        // 在这里执行取消操作
    }
}

二、在HTML中使用JavaScript函数

你可以将上面的JavaScript函数绑定到某个HTML元素的事件中，例如按钮的点击事件：

<!DOCTYPE html>
<html>
<head>
    <title>删除提示框示例</title>
    <script type="text/javascript">
        function confirmDelete() {
            if (window.confirm("你确定要删除这条记录吗？")) {
                // 用户点击了“确定”按钮
                console.log("记录已删除");
                // 在这里执行删除操作
            } else {
                // 用户点击了“取消”按钮
                console.log("取消删除");
                // 在这里执行取消操作
            }
        }
    </script>
</head>
<body>
    <button onclick="confirmDelete()">删除记录</button>
</body>
</html>

三、使用Bootstrap模态框（更美观的提示框）

如果你想要一个更美观的删除确认提示框，可以使用Bootstrap框架的模态框。以下是一个简单的示例：

1、引入Bootstrap

在你的HTML文件中引入Bootstrap的CSS和JavaScript文件：

<!DOCTYPE html>
<html>
<head>
    <title>删除提示框示例</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

2、创建模态框HTML结构

在你的HTML文件中添加模态框的HTML结构：

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">删除确认</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                你确定要删除这条记录吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
            </div>
        </div>
    </div>
</div>

3、触发模态框

在你的HTML文件中添加一个触发模态框的按钮：

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
    删除记录
</button>

4、绑定删除事件

在你的JavaScript代码中添加事件监听器，绑定删除按钮的点击事件：

<script type="text/javascript">
    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        // 在这里执行删除操作
        console.log("记录已删除");
        // 关闭模态框
        $('#deleteModal').modal('hide');
    });
</script>

四、总结

在JavaScript中实现删除提示框有多种方法，从简单的 window.confirm 到使用Bootstrap的模态框，每种方法都有其优缺点。window.confirm 方法实现简单，但界面不够美观；而Bootstrap模态框虽然需要引入额外的CSS和JavaScript文件，但可以提供更好的用户体验。根据你的需求选择合适的方法来实现删除提示框。

重点内容：

使用 window.confirm 方法创建简单的删除确认对话框。
在HTML中绑定JavaScript函数来触发删除确认对话框。
使用Bootstrap模态框实现更美观的删除确认对话框。

通过以上内容，相信你已经掌握了在JavaScript中实现删除提示框的基本方法和一些进阶技巧。希望这对你的开发工作有所帮助！