重新尺寸在自舉模式對話框動態

我有一個模式彈出（引導）的基礎上用戶選擇用於顯示內容重新尺寸在自舉模式對話框動態

I've used this as my reference, Also added this to my script section in the aspx page

這是JavaScript代碼，我已經用於檢查用戶選擇

PlayerMP.getFunctionalDetails = function (type, UserID, SessionID, SessionNo) { 
$.ajax({ 
    type: "GET", 
    url: PlayerMP.URL, 
    data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo, 
    success: function (FunctionalSplitsJS) { 
     if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) { 

      $("#divFunctionalDetails").html(FunctionalSplitsJS); 
      switch (type) { 
       case 1: 
        $("#divFunctionalsSplit");  //the table goes out of the modal window       
        break; 
       case 2: 
        TallyFunctionalSheet(); 
        $("#divFunctionalsSplit"); 
        break; 
       case 3: 
        $("#divFunctionalsSplit"); 
        break; 
      }     

      $("#divFunctionalsSplit").modal('show'); 
     } 
     else 
      window.location.href = "../Login.aspx?SessionExpired=1"; 
    } 
}); 
}

第一殼體具有表WHI ch應該顯示在模式彈出窗口中，但是表格在模態窗口之外（模態窗口的寬度有問題，但table-responsive似乎正在工作）但是，當我調整瀏覽器的大小以匹配平板電腦桌/模式自動調整大小以匹配對方。
模態的第二個和第三個案例的寬度似乎工作正常。

這是模態窗口這就是該代碼被稱爲

<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
        <div class="modal-body"> 
        <div class="table-responsive"> 
         <div id="divFunctionalDetails"></div> 
         </div> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button> 
        </div> 
      </div> 
     </div> 
</div>

全屏瀏覽器
調整大小瀏覽器

來源

2013-10-16 jayeshkv

@FlorentHemmi那個鏈接是我參考。我已經做到了。仍然沒有去 – jayeshkv

你有沒有想過什麼？ – Luminous

不好意思@發光。 – jayeshkv

默認情況下，boottrap將.modal對話框的寬度設置爲600像素（大於768像素的大屏幕）或自動（小屏幕）。下面的代碼重寫本：

$('#myModal').on('shown.bs.modal', function() { 
    $(this).find('.modal-dialog').css({width:'auto', 
           height:'auto', 
           'max-height':'100%'}); 
});

（基於：https://stackoverflow.com/a/16152629/2260496）

爲了讓更多的動態，你需要計算的寬度（jQuery的寬度（）或innerwidth（）），您的表，並設置根據它的模態對話框的寬度。

參見：http://bootply.com/88364

來源

2013-10-16 14:27:30

這正是我用過的，它仍然無法正常工作。 – jayeshkv

請參閱：http：//bootply.com/88364 –

我有同樣的問題，發現問題不在於模式本身。我給CSS裏面的每個元素添加了一個ID，通過CSS添加一個寬度：100％。

它爲我工作。

來源

2014-07-31 00:47:18 user3460493

這可以用作一個骯髒的修復程序。 – jayeshkv

更改爲您的代碼

<div class="modal-dialog" style="width: 95%">

這

<div class="table-responsive" style="width:100%">

來源

2014-12-10 07:01:28

如果設置display: table;股利內側保持模態，它會相應地調整。我的模態是可拖動的，並且在更改瀏覽器的大小時不會調整大小，但這是我發現的動態模態大小唯一可行的解決方案。

來源

2015-06-18 12:48:52 Luminous

這爲我工作ATLEAST：

.modal-dialog{ 
    position: relative; 
    display: table; /* <-- This makes the trick */ 
    overflow-y: auto;  
    overflow-x: auto; 
    width: auto; 
    min-width: 300px; 
}

來源

2016-01-28 08:59:26

輝煌。完美的作品。無需爲任何JavaScript。 –

$('#myModal').on('shown.bs.modal', function() { 
    $(this).find('.modal-dialog').addClass('modal-lg'); 
});

來源

2016-06-18 06:50:22

請添加說明。 –

看起來他正在說要添加'modal-lg'類。 – vapcguy

重新尺寸在自舉模式對話框動態

回答

相關問題