How to maximize a Modal Dialog in JavaScript?

The problem

Modal Dialogs in SharePoint 2010 are a really good feature. Moreover you can easily create your own dialogs and open them with just few lines of JavaScript :

Ok that’s cool, you can specify the size of the dialog, if the user can maximize it, close it and a lot of others things. But sometimes it can be interesting to let the dialog control some of these options. This is a very common scenario:

  • You are developing several application pages
  • These pages are opened in Modal Dialogs
  • The Dialogs are opened thanks to a User Control. A property of the User Control contains the URL of the application page to open.

Ok now you have developed an application page which contains a lot of content and you would prefer to maxmize the Dialog when opening it. Of course you can modify your User Control to use the showMaximized option when opening the dialog. But why the application page itself wouldn’t be able to maximize the dialog?

Let’s see how to that.

The solution

The main problem here is to get a reference on the actual dialog object. The JavaScript function showModalDialog returns this object but it is difficult to access it from the dialog. Fortunately there is a JavaScript function to do that (yes it is):

Now you can do a lot of things with this object. And of course one of these thing is calling internal functions that shouldn’t be called by non-Microsoft developers 🙂 So if you want to maximize the dialog when opening it you can use this code:

Yes the $z function switches the state of the dialog from “normal” to “maximized”. The $S_0 variable is set to true when the dialog is already maximized. Checking if this is the case avoids from switching the state of the dialog at each page refresh.

Of course you should be aware of the risks of using such a code since these functions are not documented and are subject to change without notice.

3 thoughts on “How to maximize a Modal Dialog in JavaScript?

Leave a Reply to Amit Cancel reply

Your email address will not be published. Required fields are marked *