Show Modal Dialog with Asp.net webpage

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

Syntax:

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

Where

  • 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 separated by a 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 😉

VB

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';") 
sb.Append("popWin=window.showModalDialog('") 
sb.Append(poppage) 
sb.Append("','") 
sb.Append("',") 
sb.Append("features") 
sb.Append(");") 
'this will reload the parent page once modal dialog is closed
sb.Append("__doPostBack('ReturnFromDialogPostBack',popWin);") 
ScriptManager.RegisterStartupScript(currentPage, currentPage.GetType(), "OpenWindow", sb.ToString(), True) 
End Sub

C#

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';");
sb.Append("popWin=window.showModalDialog('");
sb.Append(poppage);
sb.Append("','");
sb.Append("',");
sb.Append("features");
sb.Append(");");
sb.Append("__doPostBack('ReturnFromDialogPostBack',popWin);");
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!


Posted

in

,

by

Comments

4 responses to “Show Modal Dialog with Asp.net webpage”

  1. rtpHarry Avatar

    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.

  2. Nilesh Thakkar Avatar

    @rtpHarry 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 :DThe code in my post works with both the browser perfectly without any issues because Firefox 3 added support for it.

  3. Nilesh Thakkar Avatar

    @rtpHarry Thanks for the link 🙂

Leave a Reply

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

%d bloggers like this: