Grow your CSS skills. Land your dream job.

toggle to show and hide content of a webpage

  • # June 17, 2013 at 7:18 am

    hi guys ..

    I am trying make a night mode switch for one of my blogs

    so whenever i click a button a black layer will be on the top of the page

    and only the posts div will be visible and the nav bar

    and the rest of the page will be under that semi-transparent black layer

    i guessed that i can code a javascript to show the black layer and give it an z-index so it will be above the page elements , while giving the posts and the nav a greater z-index to keep them on top

    is that right ? and how to make ?

    # June 17, 2013 at 7:29 am

    Sounds like a good solution. I would probably do it this way.

    # June 17, 2013 at 7:33 am

    create a div which will be the transparent one

    .overlay{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.5);
    z-index:5;
    display:none;
    }

    then you will have to check when it is supposed to appear and with javascript change its display to block or animate its opacity so it can be shown while making the z-index of the element you want on top are set to a number bigger than 5

    like z-index 10

    make sure when the overlay its disappeared again to make the z inndex of the shown elements 0 again

    # June 17, 2013 at 9:16 am

    i tried to start creating the black layer , and give it those properties

    display:block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left:0px;
    z-index: 90;
    background: black;

    the problem that it doesn’t fill the whole page , it just appear as small rectangular

    even that i give it 100% width and height ?

    # June 17, 2013 at 9:28 am

    make sure your body tag has

    body{
    width:100%;
    height:100%;
    }

    # June 17, 2013 at 12:43 pm

    pixel grid it worked ! a new rule to learn :) , thank you ~

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".