爲什麼我的bootstrap Modal沒有被隱藏？我如何獲得多個遠程Modals的工作？

Question

我目前正在嘗試製作一個投資組合風格的網站，並決定使用Bootstrap 3.我想使用模態從簡單的圖庫中顯示我的作品。我已經成功地生成了每個模態和遠程鏈接，但是我在打開第二個模態後遇到了問題。第二個模態的內容就是所有隨後調用的模態顯示的內容。我曾嘗試使用JavaScript來摧毀每個隱藏實例上的模式，但它似乎沒有工作，我無法弄清楚爲什麼。有人可以告訴我我做錯了什麼嗎？

畫廊：

<div class="banner" id="portfolio"><h2>WORK</h2></div> 
<div id="gallery" class="final-tiles-gallery effect-zoom effect-fade-out caption-top caption-bg"> 
    <div class="ftg-items"> 
    <div class="tile"> 
     <a class="tile-inner" data-title="VoodooDesignCo." data-toggle="modal" href="portfolioDIR/voodooDetails.php" data-target="#myModal"> 
     <img class="item" data-src="images/work/voodooDesign.png"> 
     <span class='title'>Voodoo Design Co.</span> 
     <span class='subtitle'>Logo Design and Branding</span> 
     </a> 
    </div> 
    <div class="tile"> 
     <a class="tile-inner" data-title="Godzilla (2014) - Poster Design" data-toggle="modal" href="portfolioDIR/godzillaDetails.php" data-target="#myModal"> 
     <img class="item" data-src="images/work/godzillaPoster.png"> 
     <span class='title'>Godzilla (2014)</span> 
     <span class='subtitle'>Poster Design</span> 
     </a> 
    </div> 
    <div class="tile"> 
     <a class="tile-inner" data-title="Iron & Air - Title Design" data-toggle="modal" href="portfolioDIR/ironAirDetails.php" data-target="#myModal"> 
     <img class="item" data-src="images/work/ironAirType.png"> 
     <span class='title'>Iron & Air</span> 
     <span class='subtitle'>Game Concept - Title Design</span> 
     </a> 
    </div> 
    <div class="tile"> 
     <a class="tile-inner" data-title="Aquaman - Title Design" data-toggle="modal" href="portfolioDIR/aquamanDetails.php" data-target="#myModal"> 
     <img class="item" data-src="images/work/aquamanType.png"> 
     <span class='title'>Aquaman</span> 
     <span class='subtitle'>Movie Concept - Title Design</span> 
     </a> 
    </div> 
    <div class="tile"> 
     <a class="tile-inner" data-title="AllBikes.com.au" data-toggle="modal" href="portfolioDIR/allbikesDetails.php" data-target="#myModal"> 
     <img class="item" data-src="images/work/allbikesWeb.png"> 
     <span class='title'>AllBikes.com.au</span> 
     <span class='subtitle'>Website Design and Development</span> 
     </a> 
    </div> 
    </div> 
</div> 

模態：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button class="close" type="button" data-dismiss="modal" aria-label="close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title text-center"></h4> 
     </div> 
     <div class="modal-body"></div> 
     <div class="modal-footer"> 
     <button class="btn btn-defualt" data-dismiss="modal" aria-hidden="true"><span class="fa fa-hand-o-left"></span> Back</button> 
     </div> 
    </div> 
    </div> 
</div> 

遠程模態：

<div class="modal-content"> 
<div class="modal-header"> 
    <button class="close" type="button" data-dismiss="modal" aria-label="close"> 
    <span aria-hidden="true">&times;</span> 
    </button> 
    <h4 class="modal-title text-center">Iron & Air Title Design - Video Game Concept</h4> 
</div> 
<div class="modal-body"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-6 text-center"> 
     <img src="images/work/ironAirType.png" alt="Iron & Air: Racing Video Game" class="details img-responsive img-center"> 
     <p>Title Design/Typeface Exploration</p> 
     </div> 
     <div class="col-sm-6"> 
     <h4>Project Info:</h4> 
     <p>his project required the typeface design or title design for a game, movie, T.V. show, etc. This design is based on a fictional racing video game, called 'Iron & Air'</p> 
     <hr> 
     <p>blah blah blah blah</p> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-defualt" data-dismiss="modal"><span class="fa fa-hand-o-left"></span> Back</button> 
</div> 

ModalReset的JavaScript：

$("#myModal").on('hidden.bs.modal', function() { 
    $("#myModal").removeClass('fade').modal('hide'); 
    $(this).data('bs.modal', null); 
}); 

Answer 1

我之前做了類似的事情...... 我使用了一種模式，並從外部文件中提取內容。 每個模式將加載新的內容到同一個模式像這樣的東西

$("#info").click(function(){ 
     var url = HOST_NAME+"info/modal-data"; 
     $("#modal-body").load(url, function() { 
     $("#modal-body").show("slow"); 
     }); 
      loadModal(); 
    }); 

，並打開模式與此

function loadModal() { 
    $("#modal-body .page-wrapper").remove(); 
    $("#modal-body").hide(); 
    $('#edit').modal(); 

} 

莫代爾

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      </div> 
      <div id="modal-body"> 

      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal"><?=__('modal_close')?></button> 
      </div> 
     </div> 
    </div> 
</div>