Javascript 引导模式页眉和页脚未连接到正文

我的bootsrap modal正在尝试启动嵌入式google maps 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>

---

根据@Badrush的评论，我发布了这个答案。.modal内容在.modal标题之后过早关闭，因此无法正确显示该模式。将.modal页眉、.modal正文和.modal页脚放在.modal内容中后，它会完美地呈现

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

&时代；
接近

我认为您是在模式页眉div之后关闭模式内容div。尝试在模式内容中包含模式页眉、正文和页脚。@RossiRobinsion您是真正的MVP！你是对的，我太早就结束了模态人体分区。现在看起来很完美。请将您的回复作为答案发布，我会将其标记为答案。这种情况会发生，但我们会了解。很高兴你成功了。

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