javascript - Bootstrap 模式不会在点击时关闭

Question

我对网络开发非常陌生。对 JavaScript 还不太熟悉。我正在制作一条错误消息，它将使用我们的开发人员之一为不同页面创建的代码进行加载。我创建了在单击事件上显示然后在单击事件上关闭的模式。对于这一点，我根据返回的 URL 参数进行模态显示。我正在使用从我们开发人员制作的另一页复制的代码(不是使用 Bootstrap 模式)。

下面的代码使模式显示，但用于关闭模式的按钮不起作用。不知道为什么。

这是返回时附加 URL 的标签:

(**...?companyName=ACME47 & err1=0 & err2=0 & err3=1**)

当错误值为 1 时，加载页面以显示错误模式，其中包含该错误的文本。

这是我用于表单的代码(未附加样式表，因此看起来不同)。

jQuery(document).ready(function() {

  //  jQuery code snippet to get the dynamic variables stored in the url as parameters and store them as JavaScript variables ready for use with your scripts

  $.urlParam = function(name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results == null) {
      return null;
    } else {
      return results[1] || 0;
    }
  }

  // Get url parameters

  var err1 = new Number($.urlParam('err1'));
  if (isNaN(err1)) {
    err1 = new Number(0);
  }
  var err2 = new Number($.urlParam('err2'));
  if (isNaN(err2)) {
    err2 = new Number(0);
  }
  var err3 = new Number($.urlParam('err3'));
  if (isNaN(err3)) {
    err3 = new Number(0);
  }

  console.log('err1: ' + err1); // Writes a message to the browser console [f12]
  console.log('err2: ' + err2); // Writes a message to the browser console [f12]
  console.log('err3: ' + err3); // Writes a message to the browser console [f12]
  console.log('CompanyName: ' + $.urlParam('companyName')); // Writes a message to the browser console [f12]

  // Display error message function

  // Read a page's GET URL variables and return them as an associative array.

  if (err1 > 0) {
    $("#error-box").show();
    $("#error-1").show();
  };
  if (err2 > 0) {
    $("#error-box").show();
    $("#error-2").show();
  };
  if (err3 > 0) {
    $("#error-box").show();
    $("#error-3").show();
  };

});

<div class="modal" id="error-box" style="display: none;" tabindex="-1" role="dialog" aria-labelledby="error-boxLabel">
  <div class="modal-dialog" role="document" style="height:200px;">
    <div class="modal-content" style="height: 100%;">
      <div class="modal-header alert-danger">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title text-danger">Form Submission Error</h4>
      </div>
      <div class="modal-body alert-danger" style="height: 100%;">
        <div class="textWrapper">
          <ul>
            <li id="error-1" style="display: none;">That email address is already in use. (01)</li>
            <li id="error-2" style="display: none;">A company with that name already has an account in this system. (02)</li>
            <li id="error-3" style="display: none;">An unknown error has occurred. If your E-Mail or Phone Number was correctly filled in, you will be contacted shortly. (03)</li>
          </ul>
        </div>
      </div>
      <div class="modal-footer modal-footer-text">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您不应该使用 jQuery 的 show() 方法来显示模式。这样做不会将其注册到 Bootstrap，因此拥有 data-dismiss 属性的元素无需关闭。使用Bootstrap's method :

$("#error-box").modal('show');

请注意，您可能还需要使用 Bootstrap 的 show.bs.modal 回调来显示错误容器。在模式启动之前，它们可能无法用于 jQuery。