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


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:

<base target="_self"></base>


 


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 (49)
  1. Nick says:

    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.

  2. phil b says:

    showModalDialog is indeed great; but Firefox doesn’t implement it (not sure about Safari).  this is a real problem in the real world.

  3. MSDN Archive says:

    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

  4. Valentin says:

    Anybody know how to reload modal dialog insize the modal dialog?

  5. Victor1Smith says:

    Where would you really use this in a public website without complaints?

    I want to see an example.

    Thanks,

    Vic

  6. MSDN Archive says:

    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

  7. Vic says:

    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.

  8. Victor1Smith says:

    Any Chance that FireFox will get their act togehter?

    Also, since mozilla, does that mean netscape 7 won’t work either?

  9. Aaron says:

    Yeah, I really should have preface this post with the notion that this is an IE only feature – which works great if you have control over the environment, but less so when working on the web.

    Valentin, to reload inside a modal dialog you need to do a couple of things.  First off, make sure that you have <base target="_self" /> in the head of your HTML page.  Second, add a link to your page with blank HREF … something like the following:

    <a id="lnkNavigator" href=""></a>

    Then, you can use javascript to direct that link to any location you’d like and simple invoke the click method:

    document.all.lnkNavigator.href = location.href;

    document.all.lnkNavigator.click();

  10. Johan says:

    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

    }

  11. Deepak says:

    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>  

  12. rbirkby says:

    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.

  13. Alvin says:

    Anybody know how to open modal dialog with the title containg specialcharacters like  "creatäeÄÖüß"

  14. praveen says:

    how to reload or refresh showModelDilog() ,,when we opening it..

    in my application it is taking previous values only,,

  15. Neeraj Gupta says:

    <base target="_self" /> is a very helpful solution by Aaron. Thanks much!

  16. Renjith says:

    I had used Modal dialog for my app for getting  the file name and date. Sow when an invalid  file name or  is given , it will be validated in Server (whether the file exists or not) and will throw back an error msg into the modal window. So inorder to retain the same modal dialog i had used <base target="_self" />. it was fine. But the problem am facing now is once the validation is done and error msg is diaplayed My modal dialog’s <title> Enter the File name and Date </Title> is no more working.

    First it will be shown as "Enter the File name and Date — Modal Dialog Window"

    After validation and comming to same page with error msg, the page title is shown as "– Modal Dialog Window" only…

    Could you please say why the title is going of on calling <base target="_self" />. For past one month am trying to find out a solution for this problem.

    Is it becouse of the server side validation and response?… any way to correct this? Please help me…

  17. Rich says:

    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

  18. kiran says:

    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.

  19. rich says:

    try window.close() as your next line of code

    cheers

    rich

  20. Huong Nguyen says:

    Thanks for your post & thank Rich for your guide to refresh the modal dialog 🙂

  21. AL says:

    Modal dialog does work in FireFox, Not as easy to implement but there are work arounds!!!

  22. Pope says:

    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">

         <!–

             document.getElementById("myFrame").src = window.dialogArguments

         //–>

         </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.

  23. Pope says:

    Oh, if you do use that, only put body tags around the code above.  It won’t work with form tags.

  24. srini says:

    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

  25. wind says:

    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

  26. Yuga says:

    Can any one hep me in making window.showModalDialog

    work on mozilla. Plz povide the code.

    Thanks in Advance

  27. winx says:

    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();

  28. Avinash says:

    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..

  29. Jayganesh says:

    This thread was useful to me! Thanks!

  30. Faisal says:

    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

  31. Cimperiali says:

    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…

  32. yuji says:

    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

  33. Firefox 3 *finally* added the necessary showModalDialog() call:

    https://developer.mozilla.org/en/DOM/window.showModalDialog

  34. Peg says:

    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.

  35. Rajdeep says:

    —————————————————–

    i am facing one problem related to dialogarguments.

    var url = "http://rajdeep/common/QEditor/QEditor.exe/IQEditor?&username=admin&quot;;

    var arrRetVal =new Array(10);

    var temp=window.showModalDialog(url, arrRetVal,"dialogWidth:810px;dialogHeight:660px;status:No;");

    ——————————————————

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

  36. ravi says:

    Hello,

    I have a problem that when i use Showmodeldialog box.

    1.the scroll bar’s not appearing in the top , how to set to top when the page is load

    2.. the page is not refreshed the value when i click the second time of the pop-up with show modeldialog box

  37. Your comments has helped me.

    Thanks

  38. krishan says:

    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

  39. Naresh says:

    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"/>

  40. Rajkumar says:

    Hi,

    I am facing the issue what Renjith and Naresh asked. Can anybody have the solution. Please provide.

    ThanX,

    Rajkumar

  41. Arun says:

    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?

  42. Arun says:

    Hi guys,

          Any solution(s) to the above query ?

          Plz help….it’s urgent

    Thanks,

    Arun

  43. Chinabau says:

    Hi,

    I want open a winow from model dialog with parent window.How can I do this

  44. Cross Browser Solution for showModalDialog() says:

    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

  45. Roman says:

    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

  46. Swapnil Dhalwade says:

    Hey,hi Aaron

    I have one query, I have one link,on clicking which it gives me one dialog box. Now when I right-click on it and says "Open in new tab" it leads me to the parent page only, i.e dialog box doesnt get open,unless and untill I click(left-click) on it.

    I would be glad if you can help me with this.

  47. Kushal says:

    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 …

Comments are closed.

Skip to main content