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

这是我用来检查用户选择的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";
    }
});
}

• 第一种情况有一个表，该表应显示在模式弹出窗口内，但该表不在模式窗口内（模式窗口的宽度有问题，但

  表响应

  似乎正在工作）但是，当我调整浏览器的大小以匹配平板电脑的宽度时，表格/模式会自动调整大小以相互匹配
• 模态的第二个和第三个案例的宽度似乎工作正常

这是正在调用的模式窗口的代码

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

多恩

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

---

默认情况下，引导将

.model对话框的宽度设置为600px（768 px以上的大屏幕）或auto（小屏幕）。下面的代码将覆盖此选项：

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

（根据：）

为了使其更具动态性，您需要计算表的宽度（jQuery
width（）
或
innerwidth（）
），并根据它设置
模式对话框的宽度

请参阅：
我遇到了相同的问题，发现问题不是模态本身。我给里面的每个元素添加了一个ID，通过CSS只添加了一个宽度：100%到所有元素

它对我有用。
将此更改为您的代码

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



还有这个

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


如果设置了
显示：表格在保存模式的div内，它将相应地调整大小。我的模式是可拖动的，在更改浏览器大小时不会调整大小，但这是我找到的唯一可行的动态模式大小解决方案。
这至少对我有效：

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

.modal对话框{
位置：相对位置；
display:table；/*@FlorentHemmi该链接是我的参考。我已经这么做了。仍然没有上帝你能想出任何办法？？？不，抱歉@夜光。该链接的副本在此之前6个月发布并回答。@MikeTeeVee我已将我帖子中的确切问题链接为参考。这可以用作肮脏的修复。请添加解释。看起来ike他说要添加
modal lg
class.Brilliant.Works非常好。不需要任何javascript。