Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How do i make a popup appear on top of everything?

    I have a webpage HERE 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
    CSS for image
    CSS for webpage

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Oxford, UK
    Posts
    422
    Thanks
    14
    Thanked 27 Times in 27 Posts
    add...

    Code:
    z-index:99999
    to your css

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks, but to which part of the css?

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Location
    Chicago
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the CSS for the overlay.

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I have done this and it still doesn't work. Could it be something to do with my navbar?
    Code:
    #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");
    	}

  • #6
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Can't you only use z-index on an element that is positioned?
    Last edited by Pepe, the bull; 11-18-2008 at 10:28 PM.
    Pepe, the bull

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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.

    Last edited by Doctor_Varney; 11-18-2008 at 11:12 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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:? . Also get rid of those inline styles, and use an external CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    btw - your z-indexes do not have the end semicolon...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •