Twitter Bootstrap - 單擊圖像以顯示模式，具有多個圖像和多種模式。

我有9個圖像，每個人都需要顯示不同的模態。無論我點擊哪張圖片，它只顯示第一個模式。我可以看到他們都有相同的ID，這可能是我的一個錯誤，但我用javascript也不是那麼棒。總而言之，點擊一張圖片，顯示Modal A及其內容，點擊另一張圖片，顯示Modal B及其不同的內容。Twitter Bootstrap - 單擊圖像以顯示模式，具有多個圖像和多種模式。

我所擁有的是：

<script type="text/javascript">$('#myModal').modal('show')</script> 

     <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       <a href="sit1e" target="_blank"> 
        <img src="1.png" class="img-responsive" /> 
       </a> 
       <a href="site2" target="_blank"> 
        <img src="2.png" class="img-responsive" /> 
       </a> 
       <div class="icons"> 
       <a href="sound" target="_blank"> 
        <img src="audio.png" class="img-responsive" /> 
       </a> 
       <a href="print" target="_blank"> 
        <img src="print.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank">      
        <img src="info.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank"> 
        <img src="link.png" class="img-responsive" /> 
       </a> 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div> 

     <div class="col-md-4 col-sm-4 col-xs-12"> 
      <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal"> 
      <img src="2.jpg" class="img-responsive"/> 
      </a> 
     </div> 

       <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       <a href="sit1e" target="_blank"> 
        <img src="1.png" class="img-responsive" /> 
       </a> 
       <a href="site2" target="_blank"> 
        <img src="2.png" class="img-responsive" /> 
       </a> 
       <div class="icons"> 
       <a href="sound" target="_blank"> 
        <img src="audio.png" class="img-responsive" /> 
       </a> 
       <a href="print" target="_blank"> 
        <img src="print.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank">      
        <img src="info.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank"> 
        <img src="link.png" class="img-responsive" /> 
       </a> 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div>

來源

2014-09-21 Robert

，如果你看到你的錯誤，爲什麼不糾正？如果你的html中有多個相同的ID，你的javascript將無法正常工作。 – 2014-09-21 11:31:58

我的JavaScript技能有點欠缺。無論我做什麼，無論是更改ID，還是刪除第一張圖像，第一張圖像的模式都顯示在屏幕上。我找不到任何其他使用圖像切換模式的網站，所以它有點令人沮喪。我不喜歡按鈕的外觀，所以我真的希望這是可能的。 – Robert 2014-09-22 00:24:51

 <div class="col-md-4 col-sm-4 col-xs-12"> 
      <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal"> 
      First Modal 
      </a> 
      <a href="#smallModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#smallModal"> 
      Second Modal 
      </a> 
     </div> 
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       FIRST MODAL CONTENT 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div> 
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       SECOND MODAL CONTENT 
       <a href="" target="_blank"> 
        <img src="link.png" class="img-responsive" /> 
       </a> 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div>

來源

2014-09-21 11:37:21 ibrahimyilmaz

因此，將其標記爲已接受的答案;） – ibrahimyilmaz 2014-09-22 04:47:23

Twitter Bootstrap - 單擊圖像以顯示模式，具有多個圖像和多種模式。

回答

相關問題