外部頁面內容溢出了引導模態的

我有以下模態：外部頁面內容溢出了引導模態的

<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

外部頁面內容溢出了引導模態的

回答

相關問題