在引导程序中动态调整模态对话框的大小答案

【问题标题】：re-size the modal dialog in bootstrap dynamically在引导程序中动态调整模态对话框的大小
【发布时间】：2013-10-24 04:00:26
【问题描述】：

我有一个 Modal Popup (Bootstrap)，它根据用户选择显示内容

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";
    }
});
}

第一种情况有一个表格，它应该显示在模态弹出窗口内，但表格超出了模态窗口（模态窗口的宽度有问题，但table-responsive 似乎工作）但是当我调整浏览器的大小以匹配平板电脑的宽度时，表格/模态会自动调整大小以相互匹配。
模式的第 2 种和第 3 种情况的宽度似乎工作正常。

这是被调用的模态窗口的代码

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

全屏浏览器
调整大小的浏览器

【问题讨论】：

@FlorentHemmi 该链接是我的参考。我已经这样做了。还是不行
你有没有弄清楚什么？
不，对不起@Luminous。
How to resize Twitter Bootstrap modal dynamically based on the content 在此之前 6 个月发布和回答的副本。
@MikeTeeVee 我已将帖子中的确切问题作为参考链接。

标签： javascript css modal-dialog twitter-bootstrap-3

【解决方案1】：

默认情况下，Bootstrap 将.modal-dialog 的宽度设置为 600 像素（768 像素以上的大屏幕）或自动（小屏幕）。下面的代码覆盖了这个：

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

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

为了使其更加动态，您需要计算表格的宽度（jQuery width() 或 innerwidth()）并根据它设置 modal-dialog 的宽度。

见：http://bootply.com/88364

【讨论】：

【解决方案2】：

这至少对我有用：

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

【讨论】：

太棒了。完美运行。不需要任何 javascript。

【解决方案3】：

将此更改为您的代码

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

还有这个

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

【讨论】：

【解决方案4】：

如果您在持有模态的 div 内设置 display: table;，它将相应地调整大小。我的模态是可拖动的，并且在您更改浏览器的大小时不会调整大小，但这是我找到的动态模态大小的唯一可行解决方案。

【讨论】：

【解决方案5】：

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

【讨论】：

请补充说明。
看起来他说要添加modal-lg 类。

【解决方案6】：

我遇到了同样的问题，发现问题不是模态本身。我为内部的每个元素添加了一个 ID，并通过 CSS 为所有元素添加了一个 width:100%。

它对我有用。

【讨论】：

这可以用作脏修复。