modeless window to behave like a modal window using javascript

Question

Hi, I have a requirement to have some modal popups appear on a webpage. At first i implemented them as true modal windows, but then i found out that true modal windows cannot communicate with parent window in IE.

Now i am trying to implement them as regular windows that always steal focus, which is sorta working.

Here is the code that i am using:

modalPopup = window.open(url, 'popup', arr.join(",")); //use a global var here
modalPopup.focus();

$(window).bind("focus.modal", function(){
  if(modalPopup){
    modalPopup.focus();
  } else {
    $(window).unbind("focus.modal");
  }
});

There are several things wrong with this:

1. In firefox, once i close the popup, the modalPopup does not become null, it points to parent window. (this is ok, since we dont support firefox anyway)

2. In IE, it works like a charm when you open 1 window and close it, but opening any more windows results in the exception:

   Error: The callee (server [not server application]) is not available and disappeared; all connections are invalid. The call did not execute.

edit: In IE the error happens when modalPopup.focus(); is called. apparently modalPopup is never set to a falsy value when closed :P

Can you help me write a better implementation that uses window.open for creating the popups?

Before anyone says anything, using lightbox is not an option. The popup windows contain A TON of html, javascript etc, and loading them in the DOM is not going to result in a good UX. Also, we sorta have to have this work on IE6.

Answer 1

The windows containing a "ton" of JavaScript, HTML, etc. isn't a reason that you can't use "lightbox" style techniques (which do work on IE6; I don't know if a specific library you've looked at doesn't). The technique is simple:

• Have an absolutely-positioned iframe on the page whose z-index is higher than any other content normally shown on the page. Normally the iframe is hidden.
• When doing a "modal," show that iframe and set it to cover all other content. Create an absolutely-positioned div with a higher z-index than the iframe and place it wherever you want (typically in the middle of the viewport).
• Put your "modal" content in that div. This can be pre-loaded, or you can demand-load JavaScript and other resources to fill it.
• Have a UI control of some sort on the div that "closes" it by removing the div and hiding the iframe.

You can build very rich UIs with this that (can) have a dramatically better UX than enforced multiple windows. And you have the advantage of avoiding cross-windows communication and potentially offering much better response time to the user when they "open" one of these windows.

Answer 2

Don't do this with a new window, you'll only annoy your users and it's virtually impossible to achieve. If you really have to simulate a modal dialog, popping up a <div> or whatever on top of the rest of the page isn't that hard to do and doesn't require more than a few lines of JavaScript and CSS.