Modal Dialog Resize with the window

[SebastianPereira]

Hello,

First of all, thanks for this library, is a great tool!

I need to show a modal popup which can be resized as the containing
browser window is resized, can I do that using the dialog method?

I have this code to show a hidden div with a flash content inside, it
opens a modal dialog with certain dimensions, but when the browser
window is resized, the dialog window needs to be resized too, is this
possible?

$(function() {

$("#flashcontent").dialog({
bgiframe: true,
height: 768,
width: 1024,
modal: true,
autoOpen: false,
title: "Editing Maps from jQuery UI"
});

$("#open-link").click(function(){
$("#flashcontent").dialog("open");
ShowMap();
});

});

Thanks in advance!

Sebastian

[Richard D. Worth]

There's no built-in way to do this, in the dialog. But it isn't too bad. Just handle with window resize event and set the position again, and the dialog will re-center itself:

$("#dialog").dialog("option", "position", "center");

- Richard

[Sebastian Pereira]

Hello Richard, and thanks for your answer!

I'm a newbie on jQuery and trying to learn every day. Sorry to ask, I (think) did what you said, but it seems I'm doing something wrong because the dialog doesn't resize at all. This is what I did:

            $(function() {

                //Configure the dialog

                $("#flashcontent").dialog({

           height: 768,

           width: 1024,

           modal: true,

           autoOpen: false,

           title: "Editing Maps from jQuery UI"

           });

                // Resize the dialog

                $(window).resize(function(){

               $("#flashcontent").dialog('option', 'height', $(window).height() - 100);

               $("#flashcontent").dialog('option', 'width', $(window).width() - 100);

                    

                });

         //Assign the event to show in the click event of the button

       $("#open-map").click(function(){

           $("#flashcontent").dialog("open");

           ShowMap();

       });

       });

Would be great if you can give me a little push on this, thanks a lot!

Sebastian

[Scott González]

Hey Sebastian,

I just tried this out and it worked for me.  Can you post a page showing the problem?  If not, I can put together a page showing it working.  The only thing I can think of right now is if you're using jQuery UI 1.5 or 1.6 the option method won't exist.