jquery popup find true top

Question

I have a jquery popup script, and to center the popup on the screen the code is this:

function centerPopup(){
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = $(".popupContent").height();
  var popupWidth = $(".popupContent").width();

  $(".popupContent").css({
    "position": "fixed",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
    });
  }

This works, except when I need to activate a popup inside of a div tag. It appears way further down, sometimes off the page. I'm assuming it thinks the top of the div tag is the page top.

How can I solve this and make it find the actual main page top?

http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen — Kyle, Mar 23 '12 at 12:39
Are you running in quirksmode or using IE6? This shouldn't ever happen with `position: fixed`. What you are describing sounds like the expected behavior of `position: absolute`. Or, maybe `centerPopup()` is never being called. Have you checked in your debugger to be sure your code is being called? — gilly3, Mar 27 '12 at 00:53

The Alpha · Answer 1 · 2012-03-27T13:03:46.097

2

You can try this to center the element in the browser

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}


$(".popupContent").center();

Here is an example.

Update: example.

edited Mar 27 '12 at 13:03

answered Mar 27 '12 at 00:49

The Alpha

143,660
29
287
307

Ignores the actual question. OP is asking about when putting the popup inside a div further down the page. If that div has position defined, then the position of the popup will be absolute to the offset of the containing div. http://jsfiddle.net/bwGfy/4/ – Kyle Macey Mar 27 '12 at 12:05
Honestly, no. First of all, your last fiddle didn't even demonstrate itself fixing the problem. The boxes are still centered within their containers. Also, your attempt at a parent() selector only goes up one level. If the div is nested within several other divs with positioning declared, your code is rendered useless. The idea is to center the popup on the screen even when it is inside another DIV. For some reason, everyone interpreted this as just centering in general, which OP isn't great, but it works, and his problem has gone ignored – Kyle Macey Mar 27 '12 at 14:32

score 0 · Answer 2 · answered Mar 27 '12 at 00:21

First move the popup outside the div.

function centerPopup(){
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = $(".popupContent").height();
  var popupWidth = $(".popupContent").width();

  $(".popupContent").css({
    "position": "fixed",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
    })
    .prependTo('body'); //Put it at the top of the body dynamically
    // .appendTo('body'); or the bottom
  }

If you were content with your centering process and wanted to handle the situation where your popup may be contained by another DIV, this should work http://jsfiddle.net/bwGfy/5/ — Kyle Macey, Mar 27 '12 at 12:10

score 0 · Answer 3 · answered Mar 27 '12 at 00:35

You can do this easily and reliably with little to no JavaScript. Just some css:

.popupContent {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 500px;
    margin-top: -200px;   /* adjust upwards by half the height  */
    margin-left: -250px;  /* adjust leftwards by half the width */
}

The idea is to position the top left corner of your element in the center of the page, but then shift it up and to the left by adding a negative margin of half the height and width.

If you don't know the height or width at design time, don't specify the margins either. Specify top: 50% and left: 50% and set the margins at runtime with JavaScript:

var popup = $(".popupContent");
popup.css({
    marginTop: popup.height() / 2,
    marginLeft: popup.width() / 2
});

jquery popup find true top

3 Answers3