jQuery UI dialog dynamic height and width
-
18-09-2019 - |
Question
I'm using jQuery UI dialog with an iframe:
function showDialog(url, title, refresh){
var horizontalPadding = 30;
var verticalPadding = 30;
var width = 650; height = 800;
$('<iframe id="modalIframeId" allowtransparency="true" style="background-color:#c0c0c0;" frameborder="0" class="ModalIFrame" src="' + url + '" />')
.dialog({
title: title,
width: width,
height: height,
modal: true,
resizable: true,
autoResize: true,
close: function(ev, ui) {
if(refresh)
location.reload();
else
$(this).close();
},
overlay: {
opacity: 0.7,
background: "black"
}
})
.width(width - horizontalPadding)
.height(height - verticalPadding);
return false;
}
Is it possible to set width
and height
like window size?
thanks
Solution
According to the documentation you can.
(Code added since the link does not take user directly to the correct section):
OPTION - width
Initialize the dialog with the width option specified:
Code Examples:
Invoke the close method:
$( ".selector" ).dialog( "close" );
Get or set the width option, after initialization:
//Getter
var width = $( ".selector" ).dialog( "option", "width" );
//Setter
$( ".selector" ).dialog( "option", "width", 500 );
OTHER TIPS
You can get the window width and height by
var windowWidth = $(window).width();
var windowHeight = $(window).height();
and use the variables in your dialog box.
Add a
height: 140,
width: 140,
in with the rest of your options
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow