Question

我在Rails应用程序中通过bootstrap-sass-2.3.2.2 gem使用Bootstrap 2.3.2。

使用以下HTML：

  <div class="modal hide fade fullscreen" id="myModal" aria-hidden="true">
    <div class="modal-header">
      <h3></h3>
    </div>
    <div class="modal-body">
      <img src="">
    </div>
    <div class="modal-footer">
      <a class="figureFullsizeLink btn" href="">Full-size</a>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>

这些链接：

  <a href="#myModal" class="btn" data-toggle="modal" data-html="true">
  <img alt="Fig 1" class="figure" src="http://s3.amazonaws.com/..." title="..." />
  </a>

以下javascript：

$(document).ready(function() {
    ...
    // hide the modal window onload
    $("#myModal").css("display", "none");
    ...
});

在页面加载时，我得到了开放模式对话框的瞬间闪烁。（参见https://www.youtube.com/watch?v=X-HwRpKAUh8的例子）。

Answer 1

您的jQuery代码在DOM hierarchy has been fully constructed之后运行。因此，当DOM加载时，将显示模态，然后javascript将执行并隐藏模态。

默认情况下隐藏模态的最简单方法是将CSS设置为：

#myModal{display:none};

或者，您始终可以将jquery代码放在

中

<head>

页面的元素，它将在构造DOM之前执行。

Bootstrap会在慢速页面加载时暂时显示隐藏的模态对话框

1 个答案: