在引导程序中动态调整模态对话框的大小 [英] re-size the modal dialog in bootstrap dynamically
问题描述
我有一个 Modal Popup (Bootstrap),它根据用户选择显示内容
- )
为了让它更动态,你需要计算表格的宽度(jQuery
width()
或innerwidth()
)并设置modal-dialog
根据它.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
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-responsive
seem 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.
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 default Bootstrap sets the width of the
.modal-dialog
to 600px (large screens above 768 px) or auto(small screens). The code below overrides this:$('#myModal').on('show.bs.modal', function () { $(this).find('.modal-dialog').css({width:'auto', height:'auto', 'max-height':'100%'}); });
(based on: https://stackoverflow.com/a/16152629/2260496)
To make it more dynamically you will need to calculate the width (jQuery
width()
orinnerwidth()
)of your table and set the width of themodal-dialog
according it.这篇关于在引导程序中动态调整模态对话框的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
- 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