javascript - Bootstrap 模态页眉和页脚未附加到正文

Question

我的 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">&times;</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");
  });
});

Answer 1

根据@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">&times;</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>