how do I center javascript css popup div, no matter what the screen resolution?

Question

I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it\'s 100px from the top (already got

Answer 1

What you need is called a light-box.

To create it you should modify HTML,CSS and JS code.

Let's say your lightbox consist only of the string "login form". (You can put everything you want there) The HTML code should look like this:

<div id = "loginBox">login form</div>

Now, we need to hide it with CSS:

div#loginBox {
    display: none;
}

Now our box is not visible. Lets modify our box as you want it to be 100px from the top:

div#loginBox {
    display: none;
    top: 100px;
}

We will worry about disabling the background later.

Our next job is to make a button that will display the box when we need it. Easy-peasy:

<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>

Note that we don't need the "href" attribute, because that will move the screen on clicking and other unwanted behavior.

Let's attach event handler on the button via JS:

var IE = document.all ? true : false; // obligatory "browser sniffing"

function display_box() {
    document.getElementsById("loginBox").style.display = "inline-block"; // or "inline" 
}

window.onload = function() {
    var login_box = document.getElementsById("loginBox");
    if (!IE) {
        login_box.addEventListener( "click", display_box , false );
    }
    else {
        login_box.attachEvent( "onclick", display_box );
    }
}

But you want it to be in the center of the screen? Then the function goes like this:

function display_box() {
    var theBox = document.getElementsById("loginBox").style,
        left = document.width / 2 - 50;   // 150 because it is 300 / 2

    theBox.display = "inline-block";
    theBox.left = left.toString() + "px";
}

I would guess that you will want to close the window at some point and make the "disabled background" effect. To do so you can create a div class that extends on the whole screen, attach a "display" event on it, put some z-index in the css to be sure the loginBox is over the "disabled background", and attach a "close the loginBox" event on the "background" div. And now the final code looks like this:

Note that we care only about the placement of the login-button, because the other are hidden from view, and then modified by JS:

HTML:

<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>

CSS:

div#loginBox {
    display: none;
    top: 100px;
    width: 300px; #it is important to know the width of the box, to center it correctly
    z-index: 2;
}
div#backgroundDarkener {
    background: #000;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8; 
    # needless to say, you should play with opacity or if you want your
    # css to validate - background image (because I suspect it won't 
    # validate for old versions of IE, Safari, etc.) This is just a suggestion
}

JS:

var IE = document.all ? true : false; // obligatory "browser sniffing"

function display_box() {
    var theBox = document.getElementsById("loginBox").style,
        background = document.getElementsById("loginBox").style,
        left = document.width / 2 - 150;   // 150 is 300 / 2

    theBox.display = "inline-block";
    theBox.left = left.toString() + "px";
    background.display = "inline-block";
}
function hide_box() {
    document.getElementsById("loginBox").style.display = "none";
    document.getElementsById("backgroundDarkener").style.display = "none"; 
}

window.onload = function() {
    var login_box = document.getElementsById("loginBox"),
        background = document.getElementsById("backgroundDarkener");

    if (!IE) {
        login_box.addEventListener( "click", display_box , false );
        background.addEventListener( "click", hide_box , false );
    }
    else {
        login_box.attachEvent( "onclick", display_box );
        background.attachEvent( "onclick", hide_box );
    }
}

Answer 2

A quick Google search found this;

function PopupCenter(pageURL, title,w,h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

} 

Answer 3

CSS based solution to center:

You need to use these styles to make it appear dead-center:

position:absolute;
top:50%;
left:50%;
width:400px;  /* adjust as per your needs */
height:400px;   /* adjust as per your needs */
margin-left:-200px;   /* negative half of width above */
margin-top:-200px;   /* negative half of height above */

So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.

Notice that if you want your popup to appear on center even when page is scrolled you will have to use position:fixed instead with the draw back that it doesn't work in IE6.

Answer 4

Just do this:

.body {
    position: relative;
}
.popup {
    position: absolute;
    max-width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

no matters the screen or popup size. This will center the <div class="popup"></div>.

Answer 5

Simple, margin: 100px auto;. There's no need to do calculations in JavaScript.

Live Example

Answer 6

This is where flexbox comes rescue now!

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}