javascript - Bootstrap 模式没有正确隐藏

Question

我正在使用 Bootstrap 模式向访问网站的用户显示一些信息，因此我需要它在该用户访问该网站时立即显示。在单击按钮后显示的另一个页面中使用了类似的模态，我没有遇到任何问题，但是现在，由于我在页面加载时显示模态，所以我无法在按下按钮后隐藏它。任何帮助将不胜感激。另外，我认为这并不重要，但我正在使用 Yii。

代码如下:

<div id='modalConfirm' class="modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <h4 class="modal-title" align="center">Reservation Confirmation</h4>
      </div>
      <div class="modal-body" align="center">
        <p>This is your confirmation</p>
      </div>
      <div class="modal-footer">
        <button id="accButton" type="button" class="btn btn-info" data-target="#modalConfirm" data-dismiss="modal">Accept</button>
      </div>
    </div>
  </div>

 $(function(){
     $('#accButton').click(function(){
          $('#modalConfirm').modal('hide');
      });
  });

Answer 1

由于您将其显示为 HTML 的一部分，您可能希望仅使用 plain-ol-jQuery 来隐藏它。

$("#modalConfirm").hide();

或者，您可以尝试使用 Javascript 在页面加载时隐藏它:

$(document).ready(function() {
    $("#modalConfirm").modal("show");
});

使用此解决方案，您可以按照最初的预期使用模态，并且在调用模态隐藏方法时可能会获得更好的结果。

无论哪种方式，请仔细检查您的 bootstrap Javascript 文件是否已正确包含以及模态函数是否确实存在。