Title: Popup boxes are not centered like they're supposed to be
Tags: jquery;html;css
Question: I just recently implemented popup boxes into my javascript game project; however, instead of being centered like they're suppose to, they will sometimes show up in incorrect positions (mainly all the way to the right of the page).
See example of correct position:
See example of incorrect position:
Here is the popup function that is called:
//buttons can be an object or string
//if string (any string), will use default button
function popup(title,message,buttons,time){
$('#popup p[name="title"]').text(title);
$('#popup div[name="content"]').html(message);
$('#popup span[name="buttons"] :not(button[name="continue"])').remove();
$('#popup span[name="buttons"] button').hide();
if(buttons != null){
if(typeof buttons == 'object'){
//snip
}else{
$('#popup button[name="continue"]').show();
}
}else{
setTimeout(function(){
$('#popup').hide(750);
},(time+750));
//center
$('#popup').position({
my : 'center',
at : 'center',
of: $('body')
});
$('#popup').show(750);


Here is another answer: Did you try this. make it to position: absolute
since i can't see your actual html layout design. i would suggest you to try this.
$(document).ready(function () {
$("#popup").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2,
"z-index": 2000
});

Here is another answer: Just try this
$(document).ready(function () {
//buttons can be an object or string
//if string (any string), will use default button
function popup(title, message, buttons, time) {
$('#popup p[name="title"]').text(title);
$('#popup div[name="content"]').html(message);
$('#popup span[name="buttons"] :not(button[name="continue"])').remove();
$('#popup span[name="buttons"] button').hide();
if (buttons != null) {
if (typeof buttons == 'object') {
//snip
} else {
$('#popup button[name="continue"]').show();
}
} else {
setTimeout(function () {
$('#popup').hide(750);
}, (time + 750));
}
//center
$('#popup').position({
my: 'center',
at: 'center',
of: $('body')
});
$('#popup').show(750);
$('#popup').css({ 'position': 'absolute', 'left': '0', 'right': '0', 'bottom': '0', 'top': '0', 'margin': 'auto' });
Comment for this answer: you can also add this as a css under media query like
#popup{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin:auto;}
Comment for this answer: And what am I suppose to do for mobile support?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:12/26/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<jquery><html><css>', 'Title': "Popup boxes are not centered like they're supposed to be", 'ViewCount': 62, 'id': 20779867, 'user_AboutMe': None, 'user_AccountId': 3634030.0, 'user_DisplayName': 'user3029571', 'user_Reputation': 33.0, 'user_Views': 11.0, 'user_id': 3029571.0}}