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>

它工作得很好，调用它没有问题。但是，这种设置不会以某种方式阻碍我网站的加载时间吗？我真的没有遇到任何麻烦，但由于我仍在本地运行网站，我不太确定在我部署它时是否会产生一些问题。

更多信息：该页面在本地加载得很好，但它继续显示它正在加载一些东西。（我认为是 2 个 iFrame。）

那么有什么方法可以在我触发每个单独的模态时以某种方式仅加载 iframe 吗？

4

2 回答 2

1

iframe首先， Bootstrap Modal中没有使用任何组件。它正在使用div. 是的，有可能，如果你想动态加载它，你可以使用ajaxand加载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 回答