Making div/pop-up/overlays center of the screen irrespective of the screen size.

About :Front-end programers comes in a situation where we need to put our pop-ups/overlays center to the scrceen irrespective of the screen size.

Some times we face difficuly to get pop-up center to all the screens sizes,and if we give piexls manually then we need to give differnt left/rigth pixel values for different screen sizes. So we need to find global way to make all pop-ups center of the screen and here it is.

Let us take sample pop-up HTML which we want to make center for all screen sizes:

<div class='center'>
<div class="header">This is header of the pop-up</div>
<input type="button" value="save">
<input type="button" value="cancel">

For the pop-up div with the class center we can write css like this:

.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// Height could be left out!
width: 40%;
height: 50%;

This is one of the simple method with this will get desired result,we will get pop-up to the center of all screen sizes.

Restricting tab navigation to overlays(pop-ups)

Mon 22 June 2015 by Godson

About : We all have complex pages with several overlays that appear based on selections from several drop down menus and by on-click functionalitys,

Our goal is to limit the user to only be able to tab through the elements on the overlay (above positioned lightbox div) via the keyboard.

In ...

read more