jquery提示框

使用 jQuery 创建提示框

jQuery 可以通过简单的代码实现提示框功能，以下是几种常见的实现方式：

使用 alert() 方法

这是最简单的提示框，但样式和功能较为基础：

alert("这是一个提示框");

使用 confirm() 方法

用于确认操作的提示框，返回布尔值：

if (confirm("确定要执行此操作吗？")) {
    // 用户点击确定
} else {
    // 用户点击取消
}

使用 prompt() 方法

允许用户输入内容的提示框：

var userInput = prompt("请输入内容：", "默认值");
if (userInput !== null) {
    // 处理用户输入
}

使用 jQuery UI Dialog

jQuery UI 提供了更灵活的对话框组件，需先引入 jQuery UI 库：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog" title="提示框标题">
    <p>这是自定义提示框内容。</p>
</div>

<script>
$(function() {
    $("#dialog").dialog({
        modal: true,
        buttons: {
            "确定": function() {
                $(this).dialog("close");
            },
            "取消": function() {
                $(this).dialog("close");
            }
        }
    });
});
</script>

使用第三方插件

如 SweetAlert2 提供更美观的提示框：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
Swal.fire({
    title: "提示",
    text: "操作成功！",
    icon: "success"
});
</script>

自定义提示框

通过 HTML 和 CSS 创建完全自定义的提示框：

<div class="custom-alert">
    <div class="alert-content">
        <p>自定义提示内容</p>
        <button class="close-btn">确定</button>
    </div>
</div>

<style>
.custom-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
}
.alert-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
}
</style>

<script>
$(".close-btn").click(function() {
    $(".custom-alert").hide();
});

function showAlert() {
    $(".custom-alert").show();
}
</script>

以上方法可根据项目需求选择，从简单到复杂提供了多种实现方案。