引導（3.0.0）防止模態預加載內容

Question

我有以下代碼：

<div id="makatiPD" class="modal fade"> 
    <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> 
       <h4 class="modal-title">Makati City Office</h4> 
      </div> 
      <div class="modal-body"> 
       <iframe width="540" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=King's+Court+Building.,+Makati+City,+Metro+Manila,+Philippines&amp;aq=0&amp;oq=kings+court&amp;sll=13.656663,124.090576&amp;sspn=9.2249,9.876709&amp;ie=UTF8&amp;hq=&amp;hnear=King's+Court+Bldg+2,+Dela+Rosa+Street,+Lungsod+ng+Makati,+Metro+Manila,+Philippines&amp;t=m&amp;ll=14.558164,121.013203&amp;spn=0.029076,0.046349&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=King's+Court+Building.,+Makati+City,+Metro+Manila,+Philippines&amp;aq=0&amp;oq=kings+court&amp;sll=13.656663,124.090576&amp;sspn=9.2249,9.876709&amp;ie=UTF8&amp;hq=&amp;hnear=King's+Court+Bldg+2,+Dela+Rosa+Street,+Lungsod+ng+Makati,+Metro+Manila,+Philippines&amp;t=m&amp;ll=14.558164,121.013203&amp;spn=0.029076,0.046349&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<div id="quezonPD" class="modal fade"> 
    <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> 
       <h4 class="modal-title">Quezon City Office</h4> 
      </div> 
      <div class="modal-body"> 
       <iframe width="540" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Phil-Data+Building,+265+E.+Rodriguez+Sr.+Avenue,+Quezon+City,+Metro+Manila,+Philippines&amp;aq=&amp;sll=14.618293,121.006191&amp;sspn=0.00898,0.009645&amp;ie=UTF8&amp;hq=Phil-Data+Building,&amp;hnear=E+Rodriguez+Sr.+Ave,+Quezon+City,+Metro+Manila,+Philippines&amp;ll=14.618293,121.006191&amp;spn=0.006295,0.006295&amp;t=m&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Phil-Data+Building,+265+E.+Rodriguez+Sr.+Avenue,+Quezon+City,+Metro+Manila,+Philippines&amp;aq=&amp;sll=14.618293,121.006191&amp;sspn=0.00898,0.009645&amp;ie=UTF8&amp;hq=Phil-Data+Building,&amp;hnear=E+Rodriguez+Sr.+Ave,+Quezon+City,+Metro+Manila,+Philippines&amp;ll=14.618293,121.006191&amp;spn=0.006295,0.006295&amp;t=m" style="color:#0000FF;text-align:left">View Larger Map</a></small> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 

它的工作完全正常，並有關於調用它沒有問題。但是，這種設置不妨礙我的網站的加載時間？我沒有遇到任何麻煩，但由於我仍然在本地運行網站，因此我不太確定在部署它時是否會產生一些問題。

更多信息： 頁面在本地加載正常，但它繼續顯示它正在加載一些東西。 （我認爲這是2個iFrames。）

那麼有什麼方法可以在我開啓每個單獨的模態時以某種方式加載iframe？

Answer 1

Twitter的加載後-Bootstrap Modal被設計成只是另一個div，它將在最初隱藏，但顯示在一些行動...

是的，你可以動態加載該div。 Here是一個如何做到這一點的例子。

Answer 2

首先，在Bootstrap Modal中沒有使用iframe組件。它使用div。是的，如果你想動態加載它，你可以使用ajax和javascript加載。 裏面.modal-body你已經使用iframe，裝載每個模式不同嘗試ajax與javascript請求作出成功後接到的結果與javascript可以顯示加載的模態喜歡 -

$('#ModalId').modal();