动态更改 jquery UI 对话框的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17926968/
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
Changing the size of a jquery UI dialog dynamically
提问by CodeNinja
I have a jquery dialog . I am displaying an asp.net gridview within the dialog. I want the size of the dialog to change based on the size of the grid view.
我有一个 jquery 对话框。我在对话框中显示了一个 asp.net gridview。我希望对话框的大小根据网格视图的大小进行更改。
There is a button, which shows the dialog when its clicked.
有一个按钮，单击时会显示对话框。
I want to set the size of the dialog such that the gridview fits in it perfectly.
我想设置对话框的大小，以便 gridview 完全适合它。
I have my javascript code below :
$("#ViewModalPopup").dialog({
height: 800px,
scrollable: true,
width: 800,
modal: true
});
Here #ViewModalPopup is the div that encloses the modal popup.
这里 #ViewModalPopup 是包含模态弹出窗口的 div。
I tried implementing the following logic to adjust the height of the dialog based on the size of the div :
我尝试实现以下逻辑来根据 div 的大小调整对话框的高度：
var maxHeight = 600;
var currentHeight = $('#ViewModalPopup').height();
if (currentHeight < maxHeight) {
var desiredHeight = currentHeight
}
else
{
var desiredHeight = maxHeight;
}
$("#ViewModalPopup").dialog({
height: desiredheight,
scrollable: true,
width: 800,
modal: true
});
But it is not working as
但它不起作用
var currentHeight = $('#ViewModalPopup').height();
is coming out to be null from the second button click onwards.
从第二个按钮单击开始，结果为空。
Is there any way I can change the size of the dialog dynamically ?
有什么办法可以动态更改对话框的大小吗？
回答by Suresh Atta
回答by Awadhesh Singh
/* set dynamic height of modal popup and scroll according to window height */
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() < 768 ? 20 : 60;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function () {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function () {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
