HTML, HTML5, JavaScript, Programming, Web Development

showModalDialog Opens a New Window on Submit or location.href

The ShowModalDialog function has been in use for a long time and is now part of the emerging HTML5 specification. Although there are many pro and con arguments for using using this function, the fact remains that it has been extensively used in past and it continues to serve a useful function under specific conditions.

The fact that you can have two separately operating HTML forms that interact is important if you are coding more complex behaviors. For simpler behaviors you may want to look into using the jQuery modal dialog (really a floating div) which serves the same purpose.

A Bit of Background on showModalDialog()

Until recently only Internet Explorer supported displaying modal dialog boxes using the Window.showModalDialog command. Other browsers supported modal dialog boxes using the window.open command along with various JavaScript workarounds such as:

mywindow = window.open('test.html',...
if(window.focus) mywindow.focus();

The window.open workarounds were obviously awkward and so it’s good news that showModalDialog() is being standardized as part of HTML5.

As things stand the browsers that currently support the  showModalDialog() command are IE4+, FireFox 3+, Safari 5.1+, with more to come as the HTML5 standard continues to be adopted. Although the latest versions of Google Chrome do support the showModalDialog command, the resulting window is not modal.

Spawning New Windows When Refreshing

A problem with windows spawned using the showModalDialog() call is that if the spawned windows attempt to refresh themselves they will instead remain open and then also open a brand new browser window.

So to give a practical example:  if you have a Web form that opens a modal dialog containing a sub-form for the user to fill out and submit, you will have problems with the submission process because instead of refreshing itself, the sub-form will stay the same and will open a brand new window that shows its updated version.

Obviously this type of behavior is less than desirable. I have been dealing with this since the early days of Internet Explorer and the behavior continues to this day with IE9.

Happily there is a solution.

How to Make a Modal Dialog Refresh

Here is an example of a showModalDialog() call to open a forms page called test.html:

window.showModalDialog('test.html?Id=' + strId, window, 'dialogWidth:1200px; dialogHeight:820px; dialogLeft:10; dialogTop:10; center:1; status:0; help:0');

To make a modal dialog refresh without spawning a new instance of itself relies on a simple fix:

  1. First and foremost, add the HTML tag (<base target=”_self” />) to the head sectionof your HTML document. Depending on your method of refreshing the form, adding this tag may be sufficient.
    <html>
    <head>
    <base target="_self" />
  2. Next check to see if your modal dialog now correctly refreshes itself.In some cases the modal dialog will still open a new window. For instance if you were using a JavaScript self.location.href= command then you will need to replace this with a simulated hyperlink click event.
    • To do so, add a hyperlink to your page that is styled to be invisible (ie: <a href=”” id=”goLocation” style=”display:none;”>).
    • Then replace your JavaScript self.document.location.href = ‘test.html’; with a click command to your hidden hyperlink as follows:
      document.getElementById('goLocation').href = 'test.html';
      document.getElementById('goLocation').click();

Summary

In past showing modal dialog windows on the Web was inconsistently supported between the major browsers and often required browser-specific code and/or special workarounds. The HTML5 standard now includes much needed support for cross browser compatible modal dialog functionality by supporting the showModalDialog command.

As I explained, modal dialog windows created using the showModalDialog command can behave unexpectedly when the form within the modal dialog needs to have dynamic behavior. Without the proper code a form refresh or submission will spawn a new browser window. Happily this can be corrected using the steps outlined above.

I hope this article has been useful, and as always I welcome feedback on the subject in the comments below.

Alternate Options

As an alternate solution to using the showModalDialog, you may wish to look into the JQuery-UI modal dialog widget. This component is quite flexible and may suit your needs as well or possibly better than the showModalDialog option. You can custom build a form in your JQuery modal dialog and execute server-side communication via AJAX calls.

Further Reading

Advertisements

30 thoughts on “showModalDialog Opens a New Window on Submit or location.href”

  1. Absolutely brilliant. Thank you, thank you, thank you. Saved me from a complete overhaul while adding additional functionality to the modal dialog.

  2. Hi Justin,

    This issue killed my 3 days time.. (headbang) to me. You have given really an awsome solution.

    Really thanks…

    Anjali from India.. :)

  3. Hi Justin,

    This issue killed my 3 days time. (headbang) to me. Really you have given an awsome solution.

    Thanks you very much..

    Anjali from india… :)

  4. Thank you so much!! I have encountered the problem as you described. May give it a try. Hope it works.

  5. This would work if the page that is opened in the modal dialog is your page and you have control over the content. What would you do in the case of opening up someone else’s page? (Say you’re doing an open authorization where you have to click “Allow access” to enable your application access to a third-party and you need the resulting redirect to go to the same window)

  6. Thanks Justin. The solution worked perfectly for me. Had been trying every possible way for the last 3 days.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s