![](/img/trans.png)
[英]Changing jQuery UI dialog size from an outside function after creation
[英]Changing the size of a jquery UI dialog dynamically
我有一個jquery對話框。 我在對話框中顯示一個asp.net gridview。 我希望對話框的大小根據網格視圖的大小進行更改。
有一個按鈕,在單擊時顯示對話框。
我想設置對話框的大小,以便gridview完美地適應它。
I have my javascript code below :
$("#ViewModalPopup").dialog({
height: 800px,
scrollable: true,
width: 800,
modal: true
});
這里#ViewModalPopup是包含模態彈出窗口的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
});
但它不起作用
var currentHeight = $('#ViewModalPopup').height();
從點擊第二個按鈕開始變為空。
有什么辦法可以動態改變對話框的大小嗎?
/* 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'));
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.