我有以下模态:

 <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的内容从模式中溢出,并且模式上没有滚动条吗?

怎么会这样呢?

最佳答案

假设您有2个页面,index.htmsomepage.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-content">中,即使<div class="modal-body">存在于<div class="modal-content">中。

要解决此问题,并确保将远程内容加载到<div class="modal-body">


使用引导模态events
请勿在模式调用按钮或链接中使用hrefremote


因此模式调用按钮或链接将是

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


其中href更改为datalink或可以使用任何单词,但不能使用hrefremote,否则模式将检测它为远程内容并忽略<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>

10-05 20:51
查看更多