showModalDialog alternative?

Question

I'm managing an old site that's riddled with popup windows. They're quite annoying because they keep getting lost behind the main window. I'm slowly moving them over to over to a modern 'lightbox' but it's a slow and tedious process because all these popups contain forms and the validation is done server-side, which means I need to be able to submit the form and then re-render it if there's an error without breaking the whole page.

I just discovered there's a window.showDialogBox which works perfectly in Firefox (prevents you from clicking the main page until you close the dialog), but Chrome has already deprecated it, and IE only half supports it.

So, is there anything I can replace window.open with in the mean time to provide a better user experience, without re-writing every form to send and receive JSON via XHR?

Answer 1

You can use my showModalDialog polyfill using the brand new modal <dialog> element, which works in the latest Google Chrome. A <dialog> polyfill for older browsers is here.

Answer 2

You can use different codes for different browsers, like this:

if(navigator.userAgent.indexOf("MSIE") != -1){     //If the browser is IE
     //Code for IE
}
else if(navigator.vendor == "Firefox"){            //If the browser is Firefox
     //Code for Firefox
}
else if(navigator.vendor == "Google Inc."){        //If the browser is Chrome
     //Code for Chrome
}

For IE, showModalDialog works just fine and it prevents you from clicking the main page until you close the dialog.
For Firefox, you can use, as you said, showDialogBox.
For Chrome, you can use the thing that niutech suggests.

Otherwise, if you use window.open, all the popup windows will be in the task bar so if they are hidden behind the window, just click on them in the task bar to make them visible.