Recently, a friend of mine asked about how to open popup (modal) windows in IE/Firefox and return the values back to the main page. although there are tons of question/answers about this subject in ASP.NET forums, nearly none of them was comprehensive enough. For this reason and to answer my friend’s question I am going to explain how to open a dialog box, how to pass initial values to this dialog box, how to get the values back and so on.
Internet Explorer(IE) contains the showModalDialog() method which proves very effective while creating a modal dialog box and displaying a html document in it. Dishearteningly, showModalDialog() is not a W3C implementation. So it is not supported in Firefox. Firefox supports the window.open() method. However there is no built in functionality in Firefox that keeps the popup modal. At the most, you can use ‘modal=yes’ to make the popup appear in front. However unlike the showModalDialog() in IE, you cannot restrict the user to access the parent page when the popup is opened in Firefox. In short, it is not truly modal. There are different ways to get around this problem, however in this article, we will only focus on exchanging values between the parent and popup page.
I have written a small but exhaustive sample web site whose link is shown at the end of the article.
- The URL of the page to show.
- Caption of the dialog window.
- Settings of the dialog window.
The most used setting items are as follows:
- center: yes/no (indicates weather the dialog must be screen centered)
- resizable: yes/no (indicates weather the dialog window is resizeable)
- status: yes.no (indicates weather a Status Bar is added to the dialog window)
- dialogWidth: n (the width of the pop up window. like : 300px)
- dialogHight: n (the hight of the pop up window. like : 200px)
the above example indicates that OpenDialog function will open Child.aspx in a modal window whose width is 300px .
Now at your caller page, put a Button and name it btnOpenDialog. Afterwards go to properties window and put the following line next to OnClientCliek property:
To create the pop-up window we must create a page named Child.aspx. In my demo code, I have put a CheckListBox there with 3 items (Apple, Orange and Banana) in it. We also need two buttons named btnOK and btnCancel.
We do not need to write anything on code behind for btnCancel. All we have to do is to write the following code snippet into btnCancel.OnClientScript property:
In order to return a value, we can assign it to window.returnValue property but I really don’t feel like to do it because in most cases we obtain this value from some server-side code (we are ASP.NET developers!) and if we insist on using window.returnValue , we will have to mixup some server-side and client-side code together which makes our code unclear.Moreover, .returnValue is not suitable to return complex results like ILIST colelctions. By the way if you stress on using this method, take a look ad window.opener and window.returnValue properties at MSDN.
// GatherAllSelected is a method to get selected items. You can write any similar function to do this.
IList<string> Result = GatherAllSelected();
// we put the list into Session object
if (Session[“Selected”] != null)
Session[“Selected”] = Result;
// a code to be run in client-side
string scriptStr = “<script>window.close();</script>”;
// send the script to output stream
ClientScript.RegisterClientScriptBlock(typeof(string), “closing”, scriptStr);
What does the above code do for us? First, a method named GatherAllSelected prepares the value to be returned. You can write your own method with any return type. Then, we put the result value into Session object. If we decided to user window.returnValue we could not return complex results unless we serialized them. That would be a hell indeed.
After the dialog is closed, the OnClick event of our called button (btnOpenDialog) is called. In it, we can retrieve our expected value from Session object and use it:
protected void btnOpenDialog_Click(object sender, EventArgs e)
if (Session[“Selected”] != null && Session[“Selected”].ToString() != “”)
lblResult.Text = “”;
IList<string> Result = Session[“Selected”] as IList<string>;
foreach (string item in Result)
lblResult.Text += item + “\n”;
Session[“Selected”] = “”;
If you run the above example, when you click on btnOK button (on child.aspx) nothing will happen! Even, if you do something that posts back your page, a new window will be opened!
How to solve it?
To sort this problem out simply put the following line in the child.aspx’s HEAD section:
This code will make the new page open in the same window.
How to pass initial values to the pop-up window?
For this we can use Request.QueryString property but we also need to change our method a little bit. In Child.aspx and at Page_Load even handler, check the QueryString property and retrieve your initial values. The following sample code is doing it:
string SelectedList = “”;
if (Request.QueryString[“Selected”] != null)
SelectedList = Request.QueryString[“Selected”];
string items = SelectedList.Split(‘,’);
foreach (string item in items)
clbFruit.Items.FindByValue(item).Selected = true;
This code assumes that the initial values are seperated by commas. So it will split them into a string array and use them in a proper way.
If your initial values are not constant and they are calculated in your code behind, you will have to remove the OpenDialog() method from caller.aspx page. You also must remove the value of btnOpenDialog.OnClientClick property. Otherwise you will get a script error whenever this button is clicked.
After removing these values, write a code like this in caller.apx’s Form_Load event:
Then calculate your initial values and shape them in a comma separated string (i.e. ‘Banan,Apple’). Afterwards, format ScriptBody variable to include your initial value string:
ScriptBody = String.Format(ScriptBody , ‘Banana,Apple’);
Well, now you must send a window.showModalDialog or window.Open command yo the client. This approach is good also because in your code behind you can simply detect the browser type and change your script code easily to be compatible with Firefox or IE.
Anyway, again send your script to client by ClientScript.RegisterClientScriptBlock method:
string FinalScript = “<script> window.showModalDialog( “+ ScriptBody + “, ” ,’center:yes;resizable:yes;status:no;dialogWidth:3030px;dialogHight:200px’);</script> “;
ClientScript.RegisterClientScriptBlock(typeof(string), “closing”, FinalScript );
That’s it! You can download my sample code HERE and see how it works.