本文介绍如何在 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 初始化逻辑（推荐放在 <body> 底部或 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();✅ 完整流程总结
- 用户提交表单 → 请求发送至 tambahnotisphp.php；
- PHP 执行安全插入 → 成功则重定向至 tambahnotis.php?success=true；
- tambahnotis.php 检测到 $_GET['success'] === 'true' → 动态初始化并显示 Bootstrap Modal；
- 用户点击「Okay」关闭模态框，体验闭环。
通过以上改造，你将获得一个稳定、安全、符合现代前端规范的成功提示机制。
