Bootstrap 刚刚淡出页面的图库模态

Question

我正在尝试为我的业务构建一个投资组合页面，但无法使模态窗口正常工作。 javascript 只是执行：没有模态。感谢您的帮助！

<div class="container">
    <div class="row">
        <ul class="thumbnails">
          <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><a href="#image1" data-toggle="modal"><img src="images/test.jpg" alt="alt-text"/></a></li>
        </ul>
    </div>
</div>

<div id="image1" class="modal hide fade" tabindex="-1">
    <div class="modal-header">
    <button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
        <h3>Heading</h3>
    </div>
    <div class="modal-body">
        <li><img src="images/test.jpg"/></li>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Schlie&szlig;en</button>
    </div>
</div>

Answer 1

感谢您提供有关 jsbin 的示例，这使我们更容易帮助您。

您的问题出在这段摘录的第一行中：

<div id="image1" class="modal hide fade" tabindex="-1"> <!-- here -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
    <h3>Heading</h3>

Bootstrap的.hideclass是这样定义的：

.hide {
    display: none !important;
}

这意味着无论发生什么，带有 class .hide 的元素将保持隐藏状态。 !important 规则确保了这一点。

要解决您的问题，您可以像这样从 div#image1 中删除 .hide class：

<div id="image1" class="modal fade" tabindex="-1"> <!-- no hide class -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
    <h3>Heading</h3>

或者您提供一个 onclick 侦听器，如果发生点击，它会删除 .hide class。不过，这不是必需的，因为默认情况下 Bootstrap 的模态框是不可见的。

Bootstrap 刚刚淡出页面的图库模态

Bootstrap modal of image gallary just fading the page

html

modal-dialog

gallery

twitter-bootstrap