Question

我的bootsrap模式正在尝试启动嵌入式谷歌地图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");
  });
});

Answer 1

根据@ Badrush的评论，我发布了这个答案。在.modal-header之后，.modal-content过早关闭，因此模式没有正确显示。将.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>

Bootstrap Modal页眉和页脚未附加到正文

1 个答案: