SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating an Overlay for a Lightbox

    Hi all.

    As someone that is learning their way through a number of technologies I am also trying to become a JQUERY Ninja (according to the book title). I have produced this today

    This is the site here - on my testing server

    When you click on the Christmas graphic on the home page another <div> opens on the page - all works lovely.

    The thing I am struggling with is that I want a <div> to cover the whole page with a 20% transparent black fill to essentially make it look like the rest of the site is faded out and therefore giving more emphasis to the 'pop up' section.

    Does anyone have any suggestions on how to do this please.

    G

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I see you already have an "overlay" div at the bottom of the page.

    If you would show this div at the same time as the div with the content, with some simple CSS to set its background colour and position, then you'll have your lightbox effect

    Spoiler alert:
    Code CSS:
    #overlay {
    	display:none;
    	position:fixed;
    	width:100%;
    	height:100%;
    	top:0;
    	left:0;
    	z-index:10;
    	background:#000;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    	filter: alpha(opacity=50);
    	-moz-opacity: 0.5;
    	-khtml-opacity: 0.5;
    	opacity: 0.5;
    }
    #xmasHolder {
    	/* need to make sure this is higher than the z-index of #overlay */
    	z-index:100; 
    }
    /* You may also need to set these styles */
    html, body{
    	width:100%;
    	height:100%;
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that I have put that code in and made the relevant changes else where but it has all gone a bit odd - I have a relative position on my wrapper if that helps at all.


Bookmarks

Posting Permissions

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