引导缩略图模式答案

【问题标题】：Bootstrap thumbnail modal引导缩略图模式
【发布时间】：2014-10-22 16:26:13
【问题描述】：

我在visual studio中写了这段代码，我的id没有引用modal来显示新窗口，请帮我解决这个问题。

<div class="container">
    <div class="row">
    <div class="col-lg-6">
    <ul class="thumbnail" data-toggle="modal" >
    <li class="col-lg-2"><a href="#mymodal"  class="thumbnail"><img src="Thumbnail/Small/Apple/apple 5s.jpg" alt="" /></a></li>
    <li class="col-lg-2"><a href="#" class="thumbnail"><img src="Thumbnail/Small/HTC/HTC-One.jpg" alt="" /></a></li>
    <li class="col-lg-2"><a href="#" class="thumbnail"><img src="Thumbnail/Small/Sony/17_Xperia_Z2_Notepad-1.jpg" alt="" /></a></li>
    <li class="col-lg-2"><a href="#" class="thumbnail"><img src="Thumbnail/Small/sumsung/Galaxy s5 3.jpg" alt="" /></a></li>
    </ul>
    </div><!--span6-->

    <div class="col-lg-6">
    <h2>Mobile Gallery</h2>
    <p>This is a Mobile Gallery</p>
    </div><!--Second span6-->
        </div><!--row-->
    <div id="mymodal" class="modal hide fade" tabindex="-1">


    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">x</button>
    <h3>Mobile Gallery</h3>
    </div> <!--modal-header--> 
    <div class="modal-body">
    <p>this is a Gallery of mobile<img src="Thumbnail/Big/Apple/apple 5s.jpg" class="pull-right" />Apple</p>
    </div><!--modal-body-->
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Close</button>
    </div><!--modal-footer-->
    </div><!--Modal hide fade-->
         </div > <!--Container -->

【问题讨论】：

标签： twitter-bootstrap modal-dialog thumbnails

【解决方案1】：

您忘记将data-toggle="modal" data-target="#myModal" 添加到您的a 标签。另外，我不确定你为什么在模态中使用hide 类。你知道它是boostrap类吗？它使用以下 CSS 代码：

.hide {
   display: none!important;
}

要让您的代码正常工作，只需使用以下代码：

<div class="container">
<div class="row">
<div class="col-lg-6">
<ul class="thumbnail" data-toggle="modal" >
<li class="col-lg-2"><a href="#"  data-toggle="modal" data-target="#mymodal" class="btnthumbnail"><img src="Thumbnail/Small/Apple/apple 5s.jpg" alt="" /></a></li>
<li class="col-lg-2"><a href="#" data-toggle="modal" data-target="#mymodal" class="thumbnail"><img src="Thumbnail/Small/HTC/HTC-One.jpg" alt="" /></a></li>
<li class="col-lg-2"><a href="#" data-toggle="modal" data-target="#mymodal" class="thumbnail"><img src="Thumbnail/Small/Sony/17_Xperia_Z2_Notepad-1.jpg" alt="" /></a></li>
<li class="col-lg-2"><a href="#" data-toggle="modal" data-target="#mymodal" class="thumbnail"><img src="Thumbnail/Small/sumsung/Galaxy s5 3.jpg" alt="" /></a></li>
</ul>
</div><!--span6-->

<div class="col-lg-6">
<h2>Mobile Gallery</h2>
<p>This is a Mobile Gallery</p>
</div><!--Second span6-->
    </div><!--row-->
<div id="mymodal" class="modal fade" tabindex="1">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Mobile Gallery</h3>
    </div> <!--modal-header--> 
    <div class="modal-body">
        <p>this is a Gallery of mobile<img src="Thumbnail/Big/Apple/apple 5s.jpg" class="pull-right" />Apple</p>
    </div><!--modal-body-->
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div><!--modal-footer-->
</div><!--Modal hide fade-->

【讨论】：