CSS 动态调整引导程序中模态对话框的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19396631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
re-size the modal dialog in bootstrap dynamically
提问by jayeshkv
I have a Modal Popup (Bootstrap) which displays content based on the user selection
我有一个模态弹出窗口（引导程序），它根据用户选择显示内容
This is the javascript code that i've used to check for the users selection
这是我用来检查用户选择的 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";
}
});
}
- The first case has a table which is supposed to be displayed inside the modal popup but the table goes outside the modal window (there is a problem with the width of the modal window but the
table-responsiveseem to be working) But when i resize the browser to match the width of the tablet the table/modal auto resizes to match each other. - The width of the 2nd and the 3rd case's of the modal seem to work fine.
- 第一种情况有一个表格，它应该显示在模态弹出窗口内，但表格在模态窗口之外（模态窗口的宽度有问题，但
table-responsive似乎可以正常工作）但是当我将浏览器调整为匹配平板电脑的宽度，表格/模态自动调整大小以相互匹配。 - 模态的第二个和第三个案例的宽度似乎工作正常。
This is the code for the modal window thats being called
这是被调用的模态窗口的代码
<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>
- Fullscreen Browser
- Resized Browser
- 全屏浏览器
- 调整浏览器大小
回答by Bass Jobsen
By default boottrap sets the width of the .modal-dialog to 600px (large screens above 768 px) or auto (small screens). The code below overwrite this:
默认情况下，引导程序将 .modal-dialog 的宽度设置为 600px（大于 768 px 的大屏幕）或 auto（小屏幕）。下面的代码覆盖了这个：
$('#myModal').on('shown.bs.modal', function () {
$(this).find('.modal-dialog').css({width:'auto',
height:'auto',
'max-height':'100%'});
});
(based on: https://stackoverflow.com/a/16152629/2260496)
（基于：https: //stackoverflow.com/a/16152629/2260496）
To make it more dynamically you will need to calculate the width (jQuery width() or innerwidth())of your table and set the width of the modal-dialog according it.
为了使其更动态，您需要计算表格的宽度（jQuery width() 或 innerwidth()）并根据它设置模态对话框的宽度。
回答by Amit Shah
This worked for me atleast:
这至少对我有用：
.modal-dialog{
position: relative;
display: table; /* <-- This makes the trick */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
回答by Savan Kachhiya Patel
Change this to your code
将此更改为您的代码
<div class="modal-dialog" style="width: 95%">
and this
和这个
<div class="table-responsive" style="width:100%">
回答by Luminous
If you set display: table;inside the div holding the modal it'll resize accordingly. My modal is draggable and doesn't resize when you change the size of the browser, but this is the only workable solution I found for dynamic modal sizes.
如果您display: table;在 div 中设置包含模态的内容，它将相应地调整大小。我的模态是可拖动的，并且在您更改浏览器的大小时不会调整大小，但这是我找到的唯一可行的动态模态大小解决方案。
回答by M.Thenmozhi
$('#myModal').on('shown.bs.modal', function () {
$(this).find('.modal-dialog').addClass('modal-lg');
});
回答by user3460493
I had the same problem and found that the issue was not the modal itself. I added an ID to each element inside of the and via CSS just add a width:100% to all of them.
我遇到了同样的问题，发现问题不是模态本身。我为里面的每个元素添加了一个 ID，并通过 CSS 为所有元素添加了一个宽度：100%。
It worked for me.
它对我有用。
