我的 bootsrap 模式正在尝试启动嵌入式谷歌地图 iframe。在页眉中我有一个关闭按钮,在页脚中我有另一个关闭按钮。
问题在于页眉和页脚未正确附加到包含 map 的模式主体。我什至尝试过删除 iframe。 iframe 现在是问题所在,因为即使有白色背景且正文中没有任何内容,它仍然无法正确对齐。
这是我的代码:
HTML:
<div id="ModalCabotoMap" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
</div>
<div class="modal-body">
<iframe id="CabotoMap" src="https://www.google.com/maps/..."></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
这是 JS:
$(document).ready(function(){
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#CabotoMap").attr('src');
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#ModalCabotoMap").on('show.bs.modal', function(){
$("#CabotoMap").attr('src', url);
});
$('#ModalCabotoMap').on('shown', function () {
google.maps.event.trigger(map, "resize");
});
});
最佳答案
根据@Badrush 的评论,我发布了这个答案。 .modal-content 在 .modal-header 之后过早关闭,因此模式无法正确显示。将 .modal-header、.modal-body 和 .modal-footer 放入 .modal-content 后,它可以完美呈现。
<div id="ModalCabotoMap" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe id="CabotoMap" src="https://www.google.com/maps/..."></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
关于javascript - Bootstrap 模态页眉和页脚未附加到正文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33663301/