Bootstrap 模态页眉和页脚未附加到正文答案

【问题标题】：Bootstrap Modal header and footer not attached to bodyBootstrap 模态页眉和页脚未附加到正文
【发布时间】：2015-11-12 02:13:48
【问题描述】：

我的引导模式正在尝试启动嵌入式谷歌地图 iframe。在页眉中我有一个关闭按钮，在页脚中我有另一个关闭按钮。

问题是页眉和页脚没有正确附加到包含地图的模态体。我什至通过删除 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");
  });
});

【问题讨论】：

我认为您在模态标题 div 之后关闭了模态内容 div。尝试在 modal-content 中包含模态头部、正文和页脚。
@RossiRobinsion 你是真正的 MVP！你是对的，我过早地关闭了模态体 div。现在看起来很完美。请将您的回复作为答案发布，我会这样标记。
会发生这种情况，但我们会学习。很高兴您获得了成功。

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案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>

【讨论】：