外部页面内容溢出了引导模态的

我有以下模态：外部页面内容溢出了引导模态的

<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的内容溢出了模态的，也没有滚动条在模态？

这是怎么回事？

来源

2015-09-27 adam78

比方说，你有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和上面的代码示例是引导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>

来源

2015-09-27 18:04:59 Shehary

但我希望显示somepage.htm的整个页面。换句话说，我试图加载一个外部页面，类似于如何在iframe中加载页面。我怎么能做到这一点，而不必在我希望加载的每个页面中添加模态主体？ – adam78

答复已更新。 – Shehary

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

因此，使somepage.htm页面内容响应将解决内容溢出模式以及滚动条两个问题。希望它能帮助你！

来源

2015-09-27 17:48:53 viks

外部页面内容溢出了引导模态的

回答

相关问题