Question

我正在使用引导模式向访问网站的用户显示一些信息，所以我需要它在该用户访问该网站时正确显示。在单击按钮后显示的另一个页面中使用了类似的模式，我没有遇到任何问题，但现在，因为我在页面加载时显示模态，我按下按钮后无法隐藏它。任何帮助将非常感谢。另外，我认为这不重要，但我正在使用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来隐藏它。

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

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

+------+------------+-------------+
| id   | date       | Quantity    |
+------+------------+-------------+
|    1 | 2014-01-01 |          10 |
|    2 | 2014-01-20 |          20 |
|    3 | 2014-02-03 |          30 |
|    4 | 2014-02-28 |          40 |
|    5 | 2014-06-01 |          50 |
|    6 | 2014-06-13 |          24 |
|    7 | 2014-12-12 |          45 |
|    8 | 2014-12-18 |          10 |
+------+------------+-------------+

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

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

Answer 2

尝试接近类的模态

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">   <span aria-hidden="true">X</span></button> 
<h4 class="modal-title">Clear Monthly Data.</h4>
</div>

Answer 3

就我而言，它的工作原理如下。请尝试您的情况。

this.$hide();

Bootstrap模式没有正确隐藏

3 个答案:

尝试接近类的模态