1

次のコードがあります。

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

それは完全に正常に機能しており、呼び出しに関して問題はありません。しかし、この種の設定は、サイトの読み込み時間を何らかの形で妨げませんか? 実際に問題を経験したことはありませんが、まだ Web サイトをローカルで実行しているため、展開したときにいくつかの問題が発生するかどうかはわかりません。

詳細: ページはローカルで正常に読み込まれますが、何かを読み込んでいることが引き続き示されます。（2つのiFrameだと思います。）

では、個々のモーダルを起動するときに iframe のみをロードする方法はありますか?

4

2 に答える 2

1

まず、iframeBootstrap Modal で使用されるコンポーネントはありません。を使用してdivいます。はい、可能です。動的にロードしたい場合は、 and を使用してロードできajaxますjavascript。.modal-body使用した内部ではiframe、各モーダルを異なる方法でロードするために、リクエストが正常に行われた後にajaxと を使用してロードを試み、結果を受け取った後、ロードされたモーダルを次のように表示できます-javascriptjavascript

$('#ModalId').modal();
于 2013-10-16T07:27:13.293 に答える
0

Twitter-Bootstrap Modal は、最初は非表示になりますが、いくつかのアクションで表示される別の div になるように設計されています...

はい、その div を動的にロードできます。これを行う方法の例を次に示します。

于 2013-10-16T07:30:15.610 に答える