WordPress主题开发中Bootstrap Modal无法弹出问题求助

模态框无法触发和依赖引入无关，是以下三个不符合Bootstrap、WordPress运行规范的问题导致的：

• 触发锚点缺少Bootstrap模态框必需的自定义data属性，仅靠href="#modal"无法被Bootstrap JS识别为触发元素
• 模态框DOM结构缺失Bootstrap强制要求的两层嵌套容器，无法被JS正确初始化渲染
• 代码中存在多处重复ID，会引发DOM选择异常，另外WordPress的jQuery运行模式、资源加载顺序问题也可能造成干扰

1. 补全触发按钮的必要属性 #

根据你使用的Bootstrap版本，修改触发锚点代码：
Bootstrap 5 版本：

<a id="modal_trigger" href="#modal" class="sign-in-up" data-bs-toggle="modal" data-bs-target="#modal">
  <i class="fa fa-user"></i> Sign In/Up
</a>

Bootstrap 3/4 版本：

<a id="modal_trigger" href="#modal" class="sign-in-up" data-toggle="modal" data-target="#modal">
  <i class="fa fa-user"></i> Sign In/Up
</a>

2. 修正模态框DOM结构 #

Bootstrap原生模态框要求.modal容器下必须嵌套.modal-dialog、.modal-content两层容器，所有自定义内容需要放在.modal-content内部，同时修复代码中重复ID的问题，修正后的完整代码如下：

<div id="modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="popupHeader modal-header">
        <span class="header_title modal-title">Login</span>
        <!-- Bootstrap5 关闭按钮 -->
        <button type="button" class="btn-close modal_close" data-bs-dismiss="modal" aria-label="Close">
          <i class="fa fa-times"></i>
        </button>
        <!-- Bootstrap3/4 请替换为下面的关闭按钮代码
        <button type="button" class="close modal_close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="fa fa-times"></i></span>
        </button> -->
      </div>
      <div class="modal-body">
        <section class="popupBody">
          <div class="social_login">
            <div>
              <a href="#" class="social_box fb">
                <span class="icon"><i class="fab fa-facebook"></i></span>
                <span class="icon_title">Connect with Facebook</span>
              </a>
              <a href="#" class="social_box google">
                <span class="icon"><i class="fab fa-google-plus"></i></span>
                <span class="icon_title">Connect with Google</span>
              </a>
            </div>
            <div class="centeredText">
              <span>Or use your Email address</span>
            </div>
            <div class="action_btns">
              <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
              <div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
            </div>
          </div>

          <div class="user_login">
            <form action="" method="post">
              <label>Email / Username</label>
              <input name="username" type="text" id="login-username" />
              <br />
              <label>Password</label>
              <input name="password" type="password" id="login-password" />
              <br />
              <div class="checkbox">
                <input id="remember" type="checkbox" />
                <label for="remember">Remember me on this computer</label>
              </div>
              <div class="action_btns">
                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                <div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
              </div>
            </form>
            <a href="#" class="forgot_password">Forgot password?</a>
          </div>

          <div class="user_register">
            <form action="" method="post">
              <label>Username</label>
              <input name="username" type="text" id="reg-username" />
              <br />
              <label>Email Address</label>
              <input name="email" type="email" id="reg-email" />
              <br />
              <label>Password</label>
              <input name="password" type="password" id="reg-password" />
              <br />
              <div class="checkbox">
                <input id="send_updates" type="checkbox" />
                <label for="send_updates">Send me occasional email updates</label>
              </div>
              <div class="action_btns">
                <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                <div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
              </div>
            </form>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

说明：关闭按钮已经添加了Bootstrap原生的关闭属性，点击即可自动关闭模态框，不需要额外编写JS；原代码中重复的username、passwordID已修改为全局唯一值，避免DOM选择器、label关联失效。

3. WordPress环境专项排查 #

完成上述修改后如果仍无法正常触发，按以下顺序排查：

• 打开浏览器开发者工具控制台，查看是否有JS报错。最常见的问题是Bootstrap依赖jQuery，但jQuery未在Bootstrap JS之前加载，或是WordPress默认jQuery运行在无冲突模式导致$未定义，这种情况将自定义JS代码包裹在如下结构中即可：

jQuery(document).ready(function($){
  // 所有需要用到$的自定义代码写在这里
})

• 所有JS、CSS资源请通过WordPress原生的wp_enqueue_script、wp_enqueue_style函数挂载引入，不要直接在模板文件中硬写script/link标签，避免和插件加载的资源重复、顺序错乱引发冲突
• 若站点开启了缓存插件、前端性能优化插件，先清空所有缓存后再测试，避免加载旧的错误代码

内容的提问来源于stack exchange，提问作者Sheeba Ali