本文介绍在 wordpress 中检测 url 参数（如 ?contact）并在页面加载完成后自动触发 bootstrap 模态框的完整解决方案，涵盖 jquery 执行时机、dom 就绪保障及 wordpress 环境下的安全实践。
在 WordPress 中，通过 URL 参数（例如 ?contact）自动打开模态框是一个常见需求，但直接在 PHP 输出中调用 jQuery('#modal_trigger').click() 往往失效——根本原因在于：脚本执行时 DOM 可能尚未就绪，或 Bootstrap 的 modal 插件尚未初始化。你观察到 console.log 正常输出而 .click() 无效，正是这一时机问题的典型表现。
✅ 正确做法是：确保 jQuery 和 Bootstrap JS 已加载，并在 DOM 完全就绪后，直接调用 Bootstrap Modal 的 API 方法 modal('show')，而非模拟点击事件。
以下是推荐的实现方式（兼容 WordPress 默认加载机制）：
<?php
if (isset($_GET['contact'])) {
?>
<script type="text/javascript">
console.log('Contact parameter detected — triggering modal...');
jQuery(document).ready(function($) {
// 直接显示模态框（推荐）
$('#popup-modal').modal('show');
// ✅ 替代方案：若需兼容旧版 Bootstrap 3 或自定义逻辑，也可触发按钮点击
// $('#modal_trigger').trigger('click');
});
</script>
<?php
}
?>? 关键说明与注意事项：
- 必须包裹在 jQuery(document).ready() 中：确保 DOM 元素（如 #popup-modal）已渲染完毕，且 Bootstrap 的 modal 插件已完成初始化；
- 使用 modal('show') 而非 .click()：更可靠、语义清晰，绕过对触发元素（如 标签）状态和事件绑定的依赖；
-
WordPress 环境适配：
- 若你的主题使用 wp_enqueue_script() 正确加载了 jquery 和 bootstrap-js（且依赖关系正确），上述代码可直接生效；
- 若模态框基于其他库（如 Magnific Popup、Custom Modal），请替换为对应 API，例如 $.magnificPopup.open({...})；
- 安全性提醒：此逻辑仅用于前端行为控制，不涉及敏感操作，无需额外转义；但若后续扩展为动态加载内容，请对 $_GET['contact'] 做 sanitize_text_field() 处理；
- 调试建议：在浏览器开发者工具 Console 中检查是否报错 $('#popup-modal').modal is not a function——如有，说明 Bootstrap JS 未加载或版本不匹配（Bootstrap 5+ 已移除 jQuery 依赖，需改用原生 JS 实现）。
? 进阶提示（Bootstrap 5+ 用户）：
若站点已升级至 Bootstrap 5（无 jQuery 依赖），请改用原生 JavaScript：
<?php if (isset($_GET['contact'])): ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
const modalEl = document.getElementById('popup-modal');
if (modalEl) {
const modal = new bootstrap.Modal(modalEl);
modal.show();
}
});
</script>
<?php endif; ?>综上，核心原则是：将模态框触发逻辑置于 DOM 就绪且插件可用的上下文中，并优先采用官方 API 而非模拟用户交互。这样即可稳定、高效地实现 ?contact 参数驱动的自动弹窗效果。
