toggle to show and hide content of a webpage

[Historical Forums User]

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 ?

[Kitty Giraudel]

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

[pixelgrid]

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

[Historical Forums User]

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 ?

[pixelgrid]

make sure your body tag has

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

[Historical Forums User]

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

[Author]

Posts