The power of “window.showModalDialog” (posted by Aaron)

Article
02/20/2006

I must admit that up until about 18 months ago I rarely (if ever) used modal dialogs when building web pages. I’m not sure why – but somehow I never really considered them useful in the web environment. Well, I can now say that I really don’t know how I lived without them.

Benefits of using dialogs:

Simplicity – By using modal dialogs you can restrict the user to doing one thing at a time. I’m a HUGE fan of keeping things simple… and there’s really nothing simpler than a modal dialog. The user can’t change the URL. They can’t refresh the page. You can even prevent them from resizing the dialog. By limiting the things they can do, you make their experience simpler and more straightforward.
Awareness – Dialog boxes allow a user to retain awareness about where they’re at in a web app w/o losing context. Take any “Add” scenario as an example. Typically, you’ll provide some sort of “Add” functionality when presenting users with lists of information. It’s easy to add a link or button and take them to a form that allows them to add new items to the list. However, doing so can very often confuse and lose users (mind you, these are usually the novice users). By using a dialog the user can still see the list in the parent window and easily retain awareness about what they’re doing.
Cleanliness – I’ve seen many devs try to build what we in our group call “All in Wonder” pages to do everything and anything. In my experience, these types of pages are never the right approach. They’re difficult to maintain, they are overly complex, and they lead to mistakes. Using dialogs helps guide the development of a site into easier to swallow bits.

What you need to use them:

Write yourself a couple of easy to use JavaScript functions to take care of opening and closing them.

function closeDialog(returnValue)

{

window.returnValue = returnValue;

window.close();

}

function GetDialogFeatures(dialogWidth, dialogHeight, resizable)

{

return "dialogWidth: " + dialogWidth + "px;dialogHeight: " + dialogHeight + "px;status: no;unadorned: yes;scroll: no;help: no;" + (resizable ? "resizable: yes;" : "");

}

// Usage Example.

var retValue indow.showModalDialog("SomePage?id=" + id, "", GetDialogFeatures(500, 240, false));

if (retValue)

window.location.reload(true);

Include in the <head> section of your page the following tag:

Beyond that there’s really nothing to it. If you’ve never tried them before… give them a shot. I’d be willing to bet that you’ll never go back.

Aaron

Comments

Anonymous
February 20, 2006
I love them as long as the script calling the modal dialog and in the modal dialog is not brought in as an include (no script tag)

It seems IE does a real bad job at forcing a refresh against an included javascript file.
Anonymous
February 20, 2006
showModalDialog is indeed great; but Firefox doesn't implement it (not sure about Safari). this is a real problem in the real world.
Anonymous
February 21, 2006
You're right about Firefox not implementing it. I should've couched my comments with the fact that "they're great for intranet style apps" where you have more control over the enviornment.

Aaron
Anonymous
April 27, 2006
Anybody know how to reload modal dialog insize the modal dialog?
Anonymous
May 18, 2006
Where would you really use this in a public website without complaints?

I want to see an example.
Thanks,
Vic
Anonymous
May 18, 2006
Vic, you wouldn't. Until other browsers support something like this, it's really only useful for sites where you know that IE is going to be used (such as an intranet, for example).

Avi
Anonymous
May 19, 2006
Well,
I work on a large commercial internet based application that we sell.

Our clients want cross browser compatibility.

I see what you are saying. Intranet or the like, I agree.
Anonymous
May 19, 2006
Any Chance that FireFox will get their act togehter?

Also, since mozilla, does that mean netscape 7 won't work either?
Anonymous
May 22, 2006
The comment has been removed
Anonymous
April 02, 2007
Victor1Smith said: "Any Chance that FireFox will get their act togehter? " It is not FireFox, but IE who should. showModalDialog is NOT a W3C recommendation, but a Micro$oft one. In FireFox, using window.open() method, the html doc in the dialog can have something like <body onblur="window.focus();"> which will make it modal. You may want to test for browser compatibility, something like this: if (window.showModalDialog) { //do the showModalDialog way } else { //do the window.open() way }
Anonymous
May 15, 2007
If this do not work <a id="lnkNavigator" href=""></a> just try a # in href as <a id="lnkNavigator" href="http://blogs.msdn.com/controlpanel/blogs/comments.aspx?sectionid=4664#"></a>
Anonymous
May 23, 2007
Simplicity is not gained by creating modes in an application. Read up about the guy behind nomodes.com and why he named his site. There's a rich and vast CS history of modality being bad.
Anonymous
July 09, 2007
Anybody know how to open modal dialog with the title containg specialcharacters like "creatäeÄÖüß"
Anonymous
July 29, 2007
how to reload or refresh showModelDilog() ,,when we opening it.. in my application it is taking previous values only,,
Anonymous
August 09, 2007
<base target="_self" /> is a very helpful solution by Aaron. Thanks much!
Anonymous
August 15, 2007
The comment has been removed
Anonymous
October 24, 2007
Using this method will cause ie to cache the page - if you close and then reopen the page you will recieve a cached version rather than a reloaded version. use <META HTTP-EQUIV="Pragma" CONTENT="no-cache"/> to fix. Cheers
Anonymous
October 25, 2007
Hi, I am using window.returnValue to return a value from child form to the parent form. Example : function onClose() { var EmpID = document.getElementByID(’label1′).innerText; window.returnValue = EmpID; } It’s not working in the FireFox and Safari. Can you please help me regarding this. Thanks in advance.
Anonymous
October 25, 2007
The comment has been removed
Anonymous
November 29, 2007
Thanks for your post & thank Rich for your guide to refresh the modal dialog :)
Anonymous
December 26, 2007
Modal dialog does work in FireFox, Not as easy to implement but there are work arounds!!!
Anonymous
March 13, 2008
Also, you could create a static modal page that accepts the page name of the edit page in the args. <iframe name="myFrame" id="myFrame" src="" height="100%" width="100%" frameborder="no"></iframe> <script language="javascript">  </script> So you don't have to do the target="_self". And the window.returnValue still works. Feels kind of AJAX-y too (though not)... but overall kind of cumbersome. I used this before I knew about _self.
Anonymous
March 13, 2008
Oh, if you do use that, only put body tags around the code above. It won't work with form tags.
Anonymous
March 17, 2008
Hi all, I am working on dojo 1.0.2 version application, in my application i am using window.showModalDialog() to open a new window. The problem is its not working in FIREFOX version. can any body suggest how to do this in IE and FIREFOX. with regards, Srini
Anonymous
April 22, 2008
When using <base target="_self" /> on windows, I can't reload the parent window with opener.location.reload(); => it says it's Nil If I remove the base target= I can reload the parent window, but the subsequent windows of the modal winow open in a new window, not the current one ... any ideas ? thanks! rai
Anonymous
June 11, 2008
Can any one hep me in making window.showModalDialog work on mozilla. Plz povide the code. Thanks in Advance
Anonymous
July 16, 2008
I found if you put parent in commands then the commands will work in both firefox and IE. For example window.parent.returnValue = EmpID; window.parent.close();
Anonymous
August 26, 2008
I'm using ShowModalDialog to open a child window by passing parameters from Parent and also i need to return a value from Child to Parent. I can return a value from it whan my probe is that i can't close the Child window at the same time the value is already passed is cleare in parent. Meanwhile it asking me to close the window by asking "Do you want to close the window which you trying?" Can anyone help me please.. Thanks in advance, pls mail me..
Anonymous
August 27, 2008
This thread was useful to me! Thanks!
Anonymous
January 07, 2009
Hi I am using modal window in vb.net and i used same code provided by you but i can't refresh the parent page, child page closed but nothing happened to parent page, could any one help PLEASEEE Thanks Faisal
Anonymous
January 24, 2009
The showmodaldialog - at least in Ie -opens a web dialog which is modal. When it closes, the web page that opened it is receiving the value - the one setted on close or Undefined (or null) if it was not setted - ie: if user closed via "X" button and you provided a return value only iif a certain button was pressed. In web page that opened it you now would like to refresh something. Well, you should sumbit it to itself, now, setting something in it (a hidden field, a label...) to a value that can specify the return value if any, or something readable if undefined or null was returned...
Anonymous
January 25, 2009
hi I'm having a problem refreshing the parent page in IE,while it works in firefox and chrome. The child page has two buttons, btnOK and btnCancel. I only wanted to refresh the parent page if the btnOK is clicked. here's the code-behind in vb.net: Protected Sub btnCancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCancel.Click Response.Write("<script language='javascript'>window.close();</script>") End Sub Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click Dim bl_Form As New blForm bl_Form.Update(State.FormID, Constants.FormSubmitted, Date.Now) //this method updates the transaction log on the database. Response.Write("<script language='javascript'>window.close();window.opener.location.reload(true);</script>") End Sub regards, yuji
Anonymous
February 11, 2009
Firefox 3 finally added the necessary showModalDialog() call: https://developer.mozilla.org/en/DOM/window.showModalDialog
Anonymous
April 23, 2009
In a non-modal dialog, I have resizing javascript (called by the body onload() ) as follows: var tbl = document.getElementById("mainTbl"); var width = tbl.offsetWidth; var height = tbl.offsetHeight; window.resizeTo(width + 100, height + 100); This does not work with the modal dialog, even when resizing is set to true.
Anonymous
May 22, 2009
The comment has been removed
Anonymous
June 01, 2009
PingBack from http://paidsurveyshub.info/story.php?id=75256
Anonymous
June 21, 2009

QEditor is actually cgi application.But on that page i am getting dialog arguments undefined.

Anonymous
July 07, 2009
The comment has been removed
Anonymous
August 10, 2009
Your comments has helped me. Thanks
Anonymous
September 02, 2009
Hi, After child form submition , we loose the parent window reference in firefox whereas in IE this working fine, how can we retain the parent window reference after submit the child form, Pls reply ASAP. Thanks
Anonymous
October 05, 2009
Anybody have the solution for Renjith's question? To reiterate "Any action done in the page involving server call and refresh of the same window the window title is lost". The no-cache option doesn't work well <META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
Anonymous
December 07, 2009
Hi, I am facing the issue what Renjith and Naresh asked. Can anybody have the solution. Please provide. ThanX, Rajkumar
Anonymous
April 29, 2010
Hi guys, Is there any way to change the title of the modal window based on which parent window called it? I have three parent pages which call the same modal window. I want that the title of the modal window should change based on the calling page. I tried the following - <script language="javascript" type="text/javascript"> window.onload = function(){ if (window.parent.name = "Add.aspx") document.title = "Add Details"; else if (window.parent.name = "Edit.aspx") document.title = "Edit Details"; else if (window.parent.name = "Delete.aspx") document.title = "Delete Details"; else document.title = "Popup"; } </script> but from wahtever page I called it, the title of the modal window was "Add Details". Any solutions?
Anonymous
May 05, 2010
Hi guys, Any solution(s) to the above query ? Plz help....it's urgent Thanks, Arun
Anonymous
October 18, 2010
Hi, I want open a winow from model dialog with parent window.How can I do this
Anonymous
March 10, 2011
Hi, I have created a jQuery function: showModalDialog which works on all major browsers: IE, Chrome, Safari and Firefox. You can see the entire article on my blog: extremedev.blogspot.com/.../windowshowmodaldialog-cross-browser-new.html
Anonymous
March 12, 2011
Hi All, I have created a good replacement for showModalDialog which will satisfy all requirements and will work on all major browsers: IE, Firefox, Chrome and Safari. Note: Currently showModalDialog is not working properly on Chrome. Take a look at my article: extremedev.blogspot.com/.../windowshowmodaldialog-cross-browser-new.html
Anonymous
June 12, 2011
The comment has been removed
Anonymous
March 25, 2012
even i am using window.ShowModalDialog .. but i am having a problem... i am calling showModalDialog method on radio button click... now till the ModalDialog opens up i want to show the wait cursor and when the modal window opens back to default... any help would be appreciated .... thnx in advance ...

Share via

The power of “window.showModalDialog” (posted by Aaron)

Comments

Additional resources

Share via

The power of “window.showModalDialog” (posted by Aaron)

Comments

i am facing one problem related to dialogarguments. var url = "http://rajdeep/common/QEditor/QEditor.exe/IQEditor?&username=admin"; var arrRetVal =new Array(10); var temp=window.showModalDialog(url, arrRetVal,"dialogWidth:810px;dialogHeight:660px;status:No;");

Additional resources