引导模式不会在单击时关闭

Question

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

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

这是返回时将附加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可用。

Answer 2

我想这就是你想要看到的小提琴https://jsfiddle.net/sxh0n7d1/53/

注意：我将所有错误都设置为在小提琴中可见，这样就可以看到它是如何工作的。

将此代码添加到javascript中

  $('.close, .btn-danger').click(function() {
        $( "#error-box" ).hide();
  });