如何在数据库插入成功后自动弹出 Bootstrap 模态框提示-html教程-PHP中文网

如何在数据库插入成功后自动弹出 Bootstrap 模态框提示

本文介绍如何在 PHP 表单提交并成功写入数据库后，通过 URL 参数触发 Bootstrap 5 模态框（Modal）自动显示成功提示，解决因混用 jQuery UI .dialog() 与 Bootstrap Modal 导致的弹窗失效问题。

本文介绍如何在 php 表单提交并成功写入数据库后，通过 url 参数触发 bootstrap 5 模态框（modal）自动显示成功提示，解决因混用 jquery ui `.dialog()` 与 bootstrap modal 导致的弹窗失效问题。

在 Web 开发中，表单提交后的用户反馈至关重要。许多开发者尝试在数据库插入成功后跳转页面并弹出模态框提示，却常因技术栈不匹配而失败——例如本例中，前端使用的是 Bootstrap 5 的 modal 组件，但 JavaScript 代码却调用了已废弃的 jQuery UI .dialog() 方法，导致模态框无法渲染。

✅ 正确实现方式（Bootstrap 5 原生 JS API）

首先，请确保你的页面已正确引入 Bootstrap 5 的 CSS 和 JS（含 Popper），例如：

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap 5 JS + Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

然后，在 tambahnotis.php 中移除旧的 jQuery UI 脚本，替换为以下标准 Bootstrap 5 初始化逻辑（推荐放在

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

底部或 DOMContentLoaded 后执行）：

<?php if (isset($_GET['success']) && $_GET['success'] === 'true'): ?><script>
    document.addEventListener('DOMContentLoaded', function () {
        const modalEl = document.getElementById('modal-small');
        if (modalEl) {
            const modal = new bootstrap.Modal(modalEl, {
                keyboard: false,
                backdrop: 'static'
            });
            modal.show();
        }
    });
</script><?php endif; ?>

? 注意：参数名需统一！原代码中重定向使用了 sucsess=true（拼写错误），而上述脚本检测的是 success=true。请务必修正 PHP 重定向语句：

// 在 tambahnotisphp.php 中，将：
header("Location: tambahnotis.php?sucsess=true");
// ✅ 改为：
header("Location: tambahnotis.php?success=true");
exit(); // 强烈建议添加 exit() 防止后续代码执行

? 关键注意事项

不要混用框架：$(...).dialog() 是 jQuery UI 方法，与 Bootstrap Modal 完全无关，强行调用会静默失败。
模态框 HTML 结构必须合法：确保 #modal-small 元素存在、data-bs-dismiss 属性正确、且未被其他 CSS 隐藏（如 display: none !important）。
PHP 重定向后立即终止脚本：使用 exit() 或 die() 避免意外输出干扰响应头。
SQL 注入风险警示：当前代码直接拼接 SQL 字符串，存在严重安全漏洞。✅ 应改用预处理语句（Prepared Statements）：

// 替换 tambahnotisphp.php 中的 INSERT 部分：
$stmt = $conn->prepare(
    "INSERT INTO notis (nomborFail, ulasan, tarikhNotisKeluar, tarikhNotis1, tarikhNotis2, status, idPengguna) 
     VALUES (?, ?, ?, ?, ?, ?, ?)"
);
$stmt->bind_param(
    "sssssss", 
    $nomborFail, 
    $ulasan, 
    $tarikhNotisKeluar, 
    $futureDate30Days, 
    $futureDate60Days, 
    $status, 
    $idPengguna
);
$success = $stmt->execute();
$stmt->close();