Friday, October 2, 2009

Show Modal Dialog with webpage

For last few days one question is arising on forums and that is how to display Modal Dialog with webpage. It can be done using JavaScript ShowModalDialog method.

Syntax :

returnVal = window.showModalDialog(uri[, arguments][, options]);


  • uri is the uri of the document to be displayed in the dialog box.
  • arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property
  • options an optional string that specifies different attributes seperated by semicolon that will display modal dialog accordingly.

This method is introduced by Microsoft Interent Explorer4 and support added to Firefox 3. Firefox 3 doesn’t support dialogHide, edge, status, or unadorned arguments.

Here’s the code that is reusable. You can have following code in your class file as well and it works like a charm, once you add the namespace under which it is declared ;)


Public Shared Sub OpenWindow(ByVal currentPage As Page, ByVal poppage As String, ByVal width As Int32, ByVal height As Int32)
Dim sb As New System.Text.StringBuilder()
sb.Append("var features;")
sb.Append("features='dialogwidth:" & width & "px;dialogheight:" & height & "px;toolbar:0;scrollbars:0;location:0;statusbar:0;menubar:0;resizable:0';")
'this will reload the parent page once modal dialog is closed
ScriptManager.RegisterStartupScript(currentPage, currentPage.GetType(), "OpenWindow", sb.ToString(), True)
End Sub


public static void OpenWindow(Page currentPage, string poppage, Int32 width, Int32 height)
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("var features;");
sb.Append("features='dialogwidth:" + width + "px;dialogheight:" + height + "px;toolbar:0;scrollbars:0;location:0;statusbar:0;menubar:0;resizable:0';");
ScriptManager.RegisterStartupScript(currentPage, currentPage.GetType(), "OpenWindow", sb.ToString(), true);

Add following tag in head tag of your modal dialog page (Popup page)

<base target="_self" />

It will prevent popup page to open new window.

Add below line of code if you want to perform some server side processing or add it in JavaScript function.

Response.Write("<script language='JavaScript' type='text/JavaScript'>window.close();</script>")

I hope this helps!! Happy


rtpHarry said...

There are some cross browser issues with this feature of javascript. I prefer to use a model popup that comes with either AjaxControlToolkit or one for jQuery as they are fully cross browser compatible.

Nil said...


You are right!!

Even i do use it whenever we have such requirement, but it is not useful for all the cases and especially when your boss hates it :D

The code in my post works with both the browser perfectly without any issues because Firefox 3 added support for it.

rtpHarry said...

@Nil - I was thinking of Opera when I said it -

Nil said...


Thanks for the link :)