View Full Version : showModelessDialog AND "modal" attribute

07-26-2006, 04:35 AM
I have been struggling with this for a few days now and was hoping somebody had some advice. I have my webpage up now, and the problem I am having is that I have a javascript that opens a new window. This all works fine, but the problem I am running into is that when the user clicks on the thumnail, the new window opens (this works fine) but when the user clicks on another thumbnail, the window goes behind the main window. This causes the user to get lost in the site, not knowing where the new gallery window is located. So I am trying to figure out how to keep the new window on top of the main window.

Here is an example:

So what I have figured out is how to make this method work in IE. Using the showModelessDialog method.

Here is an example:
(if you click the "Click Here For Nutritional Information" link, open the window, and then click back to the main window, the showModelessDialog works by staying on top of the main window)
(This only works in Internet Explorer)

I have also gotton a separate way to work but it only works in Firefox. I used the attribute with a "onClick="window.open()", (at the end) 'modal=yes'.

Here is that example:
(It works the same as above)
(but it only works in firefox, NOT IE)

07-26-2006, 04:40 AM
Just set focus the new window.

onClick="win=window.open('EventGalleries/ArnoldClassic2005/Photo01.aspx', 'newWin', 'width=600, height=510, toolbar=0, directories=0, status=0, scrollbars=0, resizable=0, menubar=0'); win.focus();"
You can put the code in the function so that you won't need to call window.open with that long parameters.

function doOpen(url, target, w, h){
var win = window.open(url, target, 'width='+w+', height='+h+', toolbar=0, directories=0, status=0, scrollbars=0, resizable=0, menubar=0');
if (win) win.focus();
return false; //cancel href action if called by link
onClick="doOpen('EventGalleries/ArnoldClassic2005/Photo01.aspx', 'newWin', 600, 510)"
onClick="doOpen('EventGalleries/ArnoldClassic2005/Photo02.aspx', 'newWin', 600, 495)"
onClick="doOpen('EventGalleries/ArnoldClassic2005/Photo03.aspx', 'newWin', 600, 495)"

07-26-2006, 04:48 AM
When I do that the window still goes behind the main window.

07-26-2006, 04:58 AM
Can you update the link with your changes so that I can see it for myself?

07-26-2006, 06:28 AM
Here are the changes I made. The window still goes behind the Main window, which is what I am trying to avoid.


07-26-2006, 06:35 AM
It works for me in Firefox and IE. The window is activated everytime the link is clicked even when it is minimized before the link is clicked. What browser are you using?

07-26-2006, 06:44 AM
The window does always open, but what i want it to do is 1)click on the link 2)after thw window is open, click back on the main window (in which you clicked to open the link) 3)when you click back to the main window, the modal window should stay in front.


07-26-2006, 04:19 PM
So you are forcing the user to close the popup window first. IMO, that's not a good way to display images. But if you like it that way, you just combine your IE and Firefox code using object detection.

if (showModelessDialog){ //IE
var w=showModelessDialog(url, "", "...");
else { //other browsers
var w=window.open(url, "newWin", "modal=1, width=500, height=400");

07-26-2006, 10:54 PM
See http://javascript.about.com/library/blmodald1.htm for a way to do modal dialog boxes with Javascript. The whole thing has to be in one page in order to work as most browsers don't provide a modal window option and the only modal options that exist across all browsers are alert(), confirm() and prompt().