Question

guys i need a help im having a hard time to get the formula to center this modal (http://www.queness.com/post/77/simple-jquery-modal-window-tutorial) my browser size is 1263X582, Im solving it by using the formula in the jquery

    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

so basically i would end up with 1263/2 – 395/2 for the top and 582/2 – 223/2 for left then i end up TOP:179.5 LEFT:434 but when I inspect element the site and check if Im correct it gives me a different answer. i just want to know if my solving is correct, or what is the proper solving for this one.

THANKS.

Answer 1

The formula seems fine, just make sure that you are getting the right size for winH, winW and your modal dimensions.

If the modal is not visible, you’ll get 0, or if it’s not within your document window it will have a weird shape.

Also consider that height() and width() doesn’t consider padding, but outerWidth() does.

Tip:
Store $(id) inside another variable to optimize your jQuery queries.

var modal = $(id);
modal.css('top', winH/2 - modal.height()/2);