...

View Full Version : How do i make a popup appear on top of everything?



blackwolf
11-18-2008, 07:26 PM
I have a webpage HERE (http://www.blackwolf-graphics.co.uk/usefullinks.html) and on this is an image. When the image is clicked it opens a larger version of that image but appears behind my navigation bar. How do I get it to appear on the top of everything, everytime?
Here is everything used to create the page:
JAVASCRIPT (http://www.blackwolf-graphics.co.uk/lightbox.js)
CSS for image (http://www.blackwolf-graphics.co.uk/lightbox.css)
CSS for webpage (http://www.blackwolf-graphics.co.uk/css/head.css)

brazenskies
11-18-2008, 07:40 PM
add...


z-index:99999

to your css

blackwolf
11-18-2008, 07:45 PM
Thanks, but to which part of the css?

BasharTeg
11-18-2008, 07:55 PM
In the CSS for the overlay.

blackwolf
11-18-2008, 09:31 PM
I have done this and it still doesn't work. Could it be something to do with my navbar?
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both; }
#overlay img{ border: none; z-index:99999 }

#overlay{ background-image: url(overlay.png); z-index:99999 }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

Pepe, the bull
11-18-2008, 10:22 PM
Can't you only use z-index on an element that is positioned?

Doctor_Varney
11-18-2008, 11:10 PM
Yep! Z-index only works on a positioned element. But you can use floats & margins, within a positioned div.


I have done this and it still doesn't work. Could it be something to do with my navbar?

You need to apply z-index to the container that holds the image, not the image itself. Make sure the navbar has a lower z-index number.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

abduraooft
11-19-2008, 08:14 AM
Just add z-index:0; (in style )to your div having id="bwg_mg_ID1".

Btw, do you know why tables for layout is stupid: (http://www.hotdesign.com/seybold/)? . Also get rid of those inline styles, and use an external CSS.

Avril
11-19-2008, 08:29 AM
btw - your z-indexes do not have the end semicolon...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum