模态框打开报错ReferenceError: $ is not defined 求技术支援

问题原因 #

你的自定义JavaScript代码在jQuery库加载之前就执行了，此时$（jQuery的别名）还未被定义，调用$("#abrirModalError").click()时自然会触发这个错误。

解决方案 #

方案一：调整脚本加载顺序 #

把jQuery的引入代码移到自定义脚本前面，确保jQuery先加载完成：

<!-- 先引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 再执行自定义脚本 -->
<script>
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  console.log(urlParams);

  if (urlParams.get("error") != null && urlParams.get("error") == "1") {
    $("#abrirModalError").click();
  }
</script>

方案二：用原生JavaScript替代jQuery（推荐） #

Bootstrap 5已经不再依赖jQuery，直接用原生JS触发按钮点击，无需调整加载顺序：

<script>
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  console.log(urlParams);

  if (urlParams.get("error") != null && urlParams.get("error") == "1") {
    // 原生JS获取元素并触发点击
    document.getElementById('abrirModalError').click();
  }
</script>

内容的提问来源于stack exchange，提问作者Miriam Beltra