Bootstrap縮略圖模式

我在visual studio中編寫了這段代碼，我的id沒有提到模式來顯示新窗口，請幫我解決這個問題。Bootstrap縮略圖模式

<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 -->

來源

2014-08-28 user3370683

你忘了添加data-toggle="modal" data-target="#myModal"您a標籤。另外，我不確定你爲什麼在你的模式中使用hide類。你知道這是助學課嗎？它使用下面的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-->

來源

2014-08-28 20:27:09 Kamil

Bootstrap縮略圖模式

回答

相關問題