window.showModalDialog vs. window.open - javascript

What are situation when you want to use window.showModalDialog function? It seams that you can do exactly the same with window.open function and few parameters that remove some of the chrome (navigation, addressbar, etc...)
When would you want to use window.showModalDialog and window.open?

It has been a few years since this question was originally asked and things have changed a bit since then. window.showModalDialog is now officially standardized as part of HTML5 and is supported in IE, Firefox 3+, Chrome (albeit buggy), and Safari 5.1+.
Unfortunately window.showModalDialog is still plagued by a number of issues.
Modal dialogs are blocked as popups by default in Firefox, Chrome, and Safari.
The modal dialogs in Chrome are buggy and aren't truly modal - see http://code.google.com/p/chromium/issues/detail?id=16045 & http://code.google.com/p/chromium/issues/detail?id=42939.
All browsers except Chrome block the user from interacting with the entire window (favorites, browser controls, other tabs, etc...) when a modal dialog is up.
They're a pain to debug because they halt JavaScript execution in the parent window while waiting for the modal dialog to complete.
No mobile browsers support window.showModalDialog.
Therefore it's still not a good idea to use window.showModalDialog. If you need the window opened to be modal (i.e. the user cannot interact with the rest of the page until they deal with the dialog) I would suggest using jQuery UI's dialog plugin.
window.open will work for non modal windows but I would stick with jQuery UI's dialog because opening new windows tends to annoy users.
If you're interested I write about this in more detail on my blog - http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/.

Modal dialogs are dialogs that once opened by the parent, do not allow you to focus on the parent until the dialog is closed.
One could use a modal dialog for a login form, edit form, etc where you want to have a popup for user interaction but not allow the user to return to the window that opened the popup.
As a side note, I believe only Internet Explorer implementes window.showModalDialog, so that kind of limits your usage of it.

showModalDialog() is currently being standardized as part of HTML5. The third argument (for additional options) is not present in the HTML5 version, and is (safely) ignored by Safari and Chrome.
http://dev.w3.org/html5/spec//user-prompts.html#dialogs-implemented-using-separate-documents

Note that there's a bug in Chrome 2 which prevents showModalDialog() from loading properly. The popup window appears, but the content never loads.
One more reason to avoid using showModalDialog().

showModalDialog()works well in Internet Explorer, Firefox (3 and above)
Works in Chrome but popup is not model (you can go to parent window)

Note that while you can show modal from any popup window, you cannot use window.open from a model dialog in some browsers (IE, Safari).

Related

Is there any way to bring a popup front with javascript?

I am writing a web application and I open some popup windows with respect to user events.
Now I want to avoid from having too many opened popups, so I decided to bring already opened popup front instead of pop a new one.
In my researches I saw that there was a method called window.focus in old browsers like before Chrome 20 or so, but this method is no longer available because of over usage for advertisement.
Is there any solid way or even workaround to bring an already opened up popup front in javascript?
Thanks,
Ugurcan
I came up with a workaround for Chrome. In javascript, when you use window.alert method, Chrome brings according window to the front, but this is not applicible for Firefox and IE.
I will use this workaround for now. Only problem here is that, one does not simply decorate window.alert pop-up box.
We can just use css z-index to bring it at front and z-index is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc) as per caniuse.com

use setTimeout with showModalDialog in chrome will block the tab

I need a function about ShowModalDialog with setTimeout,so I test about popup window
and ModalDialog in Google Chrome and I get some problems.
there are two popup window showing on page load.one is opened by winodw.open(),
another is opened by window.showmodaldialog() like this:
setTimeout(function(){window.open("PopupWindow.html","_blank","")},100);
setTimeout(function(){window.showModalDialog("ModalDialog.html","","")},100)};
After two popup window were opened, I click an button on PupupWindow.html. It will call
the function as follow:
function test()
{
setTimeout(function(){alert("test");},1000);
}
It's work fine in Google Chrome 14. After I update the Google Chrome to version 19,
the PopupWindow.html will be hang when call test() until the ModalDialog.html was closed.
Please tell me why the case broken on Google Chrome 19 or any way to do showModalDialog
and window.open() on Google Chrome 19. Thanks for help.
The new version of Chrome is actually exhibiting correct behavior. The same behavior occurs for me in Safari as well as Firefox.
Modal dialogs by their very nature are supposed to prevent the user from interacting with the rest of the application until they complete the modal dialog.
Chrome has been plagued by a number of issues with not handling this correctly. See http://code.google.com/p/chromium/issues/detail?id=4202, http://code.google.com/p/chromium/issues/detail?id=16045, and http://code.google.com/p/chromium/issues/detail?id=42939 for some examples. It appears that maybe they're finally starting to clean some of these up if you're experiencing different behavior.
In general using window.showModalDialog should be avoided for a number of reasons that I detail here - http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/.
If you need a modal dialog I highly recommend jQuery UI's dialog plugin.

IE9 with Google Chrome Frame window.Open issue

I am using Google Chrome Frame (GCF) with IE9 and when I open a javascript dialog it opens in a tab instead of a dialog.
My IE setting for 'Tabbed Browser Settings' -> 'When a pop-up is encountered:' -> 'Let Internet Explorer decide how pop-ups should open'
I use this javascript to open a window:
window.open("http://google.com/", "_blank",
"location=0,status=no,toolbar=no,menubar=no,width=800,height=600,scrollbars=no,resizable=no");
If I change the IE setting to 'Always open pop-ups in a new window' it works. The problem lies in that I need to change that setting on every IE9 computer in the company and the computer administrators are hesitant to do this.
According to Microsoft documentation if you specify a width/height it will open in a dialog but this is not the case when using GCF.
Is there anything I can do (other than changing the setting) that will force the dialog to open in a new window instead of a tab?
Also IE is crafty it tells you it changes the setting but sometimes it actually doesn't so when testing close out of the browser all the way after changing the setting (I got all excited once after it 'worked' but it was actually the setting not updating in IE).
You have to use the rel="noreferrer" in a standard link (no window.open).
I went through reams of documentation trying to figure this out.
Fortunately ChromeFrame isn't needed as much since IE11 seems to support most things (although IE11 has a horrible memory leak).
[a href="http://www.google.com" rel="noreferrer" target="_blank"]Rel No Referrer Is the Key[/a]

window open IE8

what is the right use of window.open in IE8?
window.open('prova.php','prova','width=350,height=250');
is good in firefox but not in IE8
window.open works across browsers. And your code works fine for me in IE8 too. It could be some other reason like your pop-up is being blocked, check the settings just in case.
Check out:
Learn to Disable Internet Explorer 8’s Top 3 Most Annoying Alerts
IE8 has a native popup blocker. You have to manually enable popups. You can try NOT using window.open and instead inject html in the form of a modal in the page.

Close Parent window in fireFox

Is it possible to close parent window in Firefox 2.0 using JavaScript. I have a parent page which opens another window, i need to close the parent window after say 10 seconds.
I have tried Firefox tweaks "dom.allow_scripts_to_close_windows", tried delay but nothing seems to work.
Any help will be really appreciated.
Thanks
Using only the opener object may not always close the parent window, for security reasons.
What you can do is:
On parent, have a function named closeWindowFromChild():
function closeWindowFromChild()
{
this.window.close();
}
On child, when you want to close the window:
function closeParentWindow()
{
opener.closeWindowFromChild();
}
And this should work fine. :-D
Scissored from quirksmode (EDIT: added a bit of context, as suggested by Diodeus):
Theoretically
opener.close()
should be the code from the popup: close the window that has opened this popup.
However, in some browsers it is not allowed to automatically close windows that have not been opened by JavaScript. The line above works fine in Explorer on Mac, Mozilla, Opera and OmniWeb, but not in Explorer on Windows, Netscape 4 and lower and iCab. In these browsers the user is asked to confirm the closing of the window. As to Safari, it does absolutely nothing.
Rather to my surprise it's very easy to get around this confirm box in Explorer 5.5 and 6 on Windows. Explorer merely looks if the page has an opener. If it doesn't the window has been opened by the user and may not be closed without a confirm. So what we need to do is trick Explorer into thinking the opening page has an opener:
opener.opener = top; // or whatever, as long as opener.opener has a value;
opener.close()
This trick doesn't work in Netscape 4 and lower and iCab, these browsers have more sophisticated ways to determine whether a window has been opened by JavaScript.
Generally, you can't close a window which you didn't open yourself using javascript.

Categories

Resources