jQuery UI dialog dynamic height and width

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

cssyphus · Accepted Answer · 2013-05-06 16:54:12Z

4

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 );

edited May 6, 2013 at 16:54

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

answered Dec 9, 2009 at 14:40

Jan Hančič

54k17 gold badges99 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Szyndel · Accepted Answer · 2014-09-16 15:37:43Z

1

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.

edited Sep 16, 2014 at 15:37

Mike Szyndel

10.6k11 gold badges51 silver badges64 bronze badges

answered Sep 16, 2014 at 15:20

RendezAWS

1039 bronze badges

Comments

mat-mcloughlin · Accepted Answer · 2009-12-09 14:51:25Z

-1

Add a

height: 140,
width: 140,

in with the rest of your options

answered Dec 9, 2009 at 14:51

mat-mcloughlin

6,79213 gold badges50 silver badges63 bronze badges

Collectives™ on Stack Overflow

jQuery UI dialog dynamic height and width

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related