外部页面内容溢出 Bootstrap 模态

Question

我有以下模式：

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

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

怎么会这样？

Answer 1

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

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

Answer 2

假设您有 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 在评论中要求将远程页面内容加载到 modal-body 上面的代码示例是 bootstrap v3+ 的默认行为，其中模态忽略 modal-body 并始终加载远程内容即使 <div class="modal-body"> 存在于 <div class="modal-content">.

中，进入 <div class="modal-content"> 也没关系

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

使用bootstrap模式events
不要在模态呼叫按钮或link

href

remote

所以模态呼叫按钮或link将是

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

外部页面内容溢出 Bootstrap 模态

External Page Content Overflows out of Bootstrap Modal

html

css

twitter-bootstrap

bootstrap-modal