Question

我是web dev的新手。仍然不太熟悉JavaScript。我正在使用它将使用我们为不同页面创建的开发人员之一的代码加载错误消息。我创建了在单击事件上显示的模态，然后在单击事件上关闭。对于这个我有基于返回的URL参数的模态显示。我正在使用我从我们的开发人员制作的另一个页面复制的代码（不是使用Bootstrap模式）。

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

这是在返回时附加网址的标记：

(**...?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();
  });

Bootstrap模式不会在点击时关闭

2 个答案: