外部页面内容溢出 Bootstrap 模式答案

【问题标题】：External Page Content Overflows out of Bootstrap Modal外部页面内容溢出 Bootstrap 模式
【发布时间】：2015-09-28 05:26:03
【问题描述】：

我有以下模态：

 <a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">

<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog " role="document">
          <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="extLinkModalLabel"></h4>
            </div>
            <div class="modal-body">


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

当我点击链接启动模态时，somepage.htm的内容溢出模态并且模态上没有滚动条？

这是怎么回事？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

假设您有 2 个页面，index.htm 和 somepage.htm

您在页面index.htm 中有模态，并且您想在模态中显示somepage.htm。那么

index.htm 页面代码将是

<a href="somepage.htm" data-toggle="modal" data-target="#extLinkModal">

<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog " role="document">
      <div class="modal-content">
         //Here you can show the content from `somepage.htm`
      </div>
    </div>
</div>

而 somepage.htm 页面内容将是

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="extLinkModalLabel"></h4>
</div>
<div class="modal-body">
  //Put the page content here
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

这将解决问题somepage.htm 溢出模态并且模态上没有滚动条

替代解决方案

OP 在 cmets 中要求将远程页面内容加载到 modal-body 和上面的代码示例是 bootstrap v3+ 的默认行为，其中模式忽略 modal-body 并始终将远程内容加载到 <div class="modal-content"> 无关紧要，即使<div class="modal-body"> 存在于 <div class="modal-content"> 中。

要解决这个问题并确保在<div class="modal-body"> 中加载远程内容

使用引导模式events
不要在模态调用按钮或链接中使用href 或remote

所以模态调用按钮或链接将是

<a datalink="somepage.htm" data-toggle="modal" data-target="#extLinkModal" class="btn btn-primary">

其中href 更改为datalink 或可以使用任何单词，但不能使用href 或remote，否则模态将检测为远程内容并忽略<div class="modal-body"> 并将内容加载到<div class="modal-content">

模态 HTML

<div class="modal fade" id="extLinkModal" tabindex="-1" role="dialog" aria-labelledby="extlinkModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog " role="document">
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="extLinkModalLabel"></h4>
        </div>
        <div class="modal-body">
            //Remote Page Content loads here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

和JS

<script>
$(document).ready(function() {
    $("#extLinkModal").on("show.bs.modal", function(e) {
        var link = $(e.relatedTarget);
        $(this).find(".modal-body").load(link.attr("datalink"));
    });
});
</script>

【讨论】：

但我希望显示 somepage.htm 的整个页面。换句话说，我正在尝试加载一个外部页面，类似于我在 iframe 中加载页面的方式。我怎样才能做到这一点，而不必在我希望加载的每个页面中添加模态正文？

【解决方案2】：

somepage.htm 的内容溢出模态框，因为您的 somepage.htm 页面没有响应，并且您的模态框有一些固定的高度和宽度。因此，如果需要，请尝试使用引导类和一些额外的 css 使您的页面具有响应性。

因此，使 somepage.htm 页面内容具有响应性将解决内容溢出模式和滚动条的问题。希望对你有帮助！

【讨论】：