부트 스트랩 (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

트위터 같은 -로드 모달을 표시 할 수 있습니다 javascript과 결과를받은 후로드하려고 -Bootstrap Modal은 초기에 숨겨져 있지만 일부 액션에 표시되는 다른 div로 디자인되었습니다 ...

예, 해당 div를 동적으로로드 할 수 있습니다. Here은이를 수행하는 방법의 예입니다.

Answer 2

먼저 부트 스트랩 모달에 iframe 구성 요소가 사용되지 않습니다. div을 사용 중입니다. 가능합니다. 동적으로로드하려는 경우 ajax 및 javascript을 사용하여로드 할 수 있습니다. 당신이 다른 각각의 모달을로드하기 위해, iframe을 사용했다 .modal-body 내부 는 ajax와 javascript으로 요청이 성공적으로 후 당신이

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