SOS

Shane O'Sullivan's technical blog… really ties the room together

Navigating in an IE Modal Dialog

Posted by Shane O'Sullivan on December 31, 2007

Internet Explorer has a nice feature where a new window can be opened modally using the window.showModalDialog function, meaning that the page that opened it cannot be accessed until the new window is closed. This can be useful in many situations.

However, the main limitation of IE Modal Dialogs (other than being non-standard), is that any hyperlink clicked in a modal dialog causes another, non modal, dialog to be opened, rather than opening the page linked to in the same window, as would happen in a normal pop up window.

The key to solving this problem is to note that a modal dialog only opens another window when a GET request is made, not when a POST request is made. However, an anchor tag automatically causes a GET request, so the solution is to:

  1. Catch the click on each anchor tag, cancel it,
  2. Submit a dynamically created FORM element, with it’s method set to ‘POST’ and it’s action set to the URL of the link clicked.

While it is possible to put a listener on each anchor tag to achieve this, such an approach will not scale well. Instead, place a listener on the body tag. The example below is done using methods from the Dojo Ajax Toolkit, since that the toolkit I use the most, but you can of course use whatever methods you like to achieve the same result:

<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.body(), "onclick", function(evt) {
if(evt.target.tagName != "A") {return true;}
dojo.stopEvent(evt);
var form = document.createElement("form");
form.setAttribute("target", window.name ? window.name : "SrPopUp");
form.setAttribute("action", url);
form.setAttribute("method","POST");
document.appendChild(form);
form.submit();
return false;
});
});
</script>

This method assumes that you have control over the content of the page being shown in the modal dialog. It would also make sense to add a similar listener to the body tag for key events, as a user can trigger an anchor tag by tabbing to it and hitting enter.

Thanks to Danny Goodman and Steiner Overbeck Cook for coming up with this solution.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

About these ads

15 Responses to “Navigating in an IE Modal Dialog”

  1. [...] Navigating in an IE Modal Dialog, Shane O’Sullivan, Dojo Contributor [...]

  2. Jorge Hernandez said

    Shane,

    I liked this solution. I found out that surrounding the form with an update panel and setting the target of the hyperlink to _self will works too.

    Jorge

  3. Hi Jorge,

    What is an update panel? Is that a .NET component?

    Thanks

    Shane

  4. [...] Shane O’Sullivan on 25 June, 2008 The application I work on for my employer makes extensive use of modal dialogs in Internet Explorer.  These are a nice feature where you can load a page in a dialog box, and the [...]

  5. John said

    Shane,

    Yes, an update panel is a .Net component. It’s specifically used to make a form Ajax enabled.

    John.

  6. michael said

    just put this into the head tag of the page.

  7. michael said

    base target=”_self”

  8. michael said

    as a node that is…

  9. Dave said

    There is a much easier way to do this. Add a element to the of the modal dialog page and set the base’s target attribute to “_self”.

    This will prevent the dialog from opening up new windows.

  10. Dave said

    Well, that didn’t work so well because your forum doesn’t allow me to post html tags.

    What I was trying to say is that you should add a “base” element to the head of the modal dialog page and set the base’s target attribute to “_self”.

    I’ll try to post it again with the angle brackets replaced with square brackets.

    [head]
    [base target="_self"/]
    [/head]

  11. I tried that, but it didn’t work in all situations. The only reliable way I found to make navigation work in modal dialogs is the one I’ve outlined here.

  12. skybay said

    phan mem…

    [...]Navigating in an IE Modal Dialog « SOS[...]…

  13. Find Sugar Daddies Online…

    [...]Navigating in an IE Modal Dialog « SOS[...]…

  14. Hi there just wanted to give you a brief heads up and let you know a
    few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue.

    I’ve tried it in two different web browsers and both show the same results.

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

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: