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>

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

为什么会这样？

Answer 1

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

因此，使somepage.htm页面内容响应将解决内容溢出问题以及滚动条。希望它会对你有所帮助！

Answer 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忽略modal-body并始终将远程内容加载到<div class="modal-content">即使<div class="modal-body">中存在<div class="modal-content">，也无关紧要。

要解决此问题，请确保在<div class="modal-body">

中加载远程内容

使用bootstrap modal events
请勿在模态通话按钮或链接

href

remote

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

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

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

模态HTML

<div class="modal-content">

和JS

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

外部页面内容溢出Bootstrap模式

2 个答案: