Question

我正在尝试为我的公司构建一个投资组合页面，但无法让Modal工作。 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的.hide类定义如下：

.hide {
    display: none !important;
}

这意味着无论发生什么，具有类.hide的元素都将保持隐藏状态。这是通过!important规则确保的。

要解决您的问题，请从.hide中删除div#image1类，如下所示：

<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类。但是，这不是必需的，因为默认情况下Bootstrap的模态不可见。

图像gallary的Bootstrap模式只是淡化页面

1 个答案: