Jquery popup modal must center

Question

Ok i have this code:

    //When you click on a link with class of poplight and the href starts with  a # 
$('a.poplight[href^=#]').click(function() {
var a = $(this).attr('vd');
var b = $(this).attr('id');

    $.post('chk.php', { name : a, name2 : b }, function(output) {
    $('#con').html(output).show();
});

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size



    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value


    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a     href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');



    //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup

    $('#' + popID).css({ 

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });

    //Fade in Background

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 



    return false;

});


//Close Popups and Fade Layer

$('a.close').live('click', function() { //When clicking on the close or fade layer...

    $('#fade , .popup_block, .login').fadeOut(function() {
    $('#fade').remove();

}); //fade them both out



    return false;

});
//end poup

now, whenever the user clicked on the element which has a class of poplight then the above code is executed and it should display the div that has the class of popup_block but before that an ajax function is called and i dont have problem with that but the centerialism of that div(which has the class of a popup_block) is lost, or its appear awfully uncetered as u see that there is a code there that implement the centerialism of that div but it doesnt, its only centered when i specified the position on css or the width and height of that div on the css but i dont want to do that, the jquery function should do that (see code, its been implented there). maybe there is a lack in my code or i just miss something but whatever is that, i dont know. please help, i just want to center that div upon call.thank you in advance.

-that div(has a class of popup_block) is fixed positioned, z-index:99999 and display none by defaut.

Answer 1

this might help,

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

Answer 2

I couldn't bring myself to actually read your code, so I set up a couple of examples for you instead:

---

Absolute centring of fixed size elements

This style is easy. Just set your element position to absolute, shove it to 50%/50% and pull back half it's width and height using negative margins.

jsFiddle example

---

Absolute centring of dynamically sized elements

This is more tricky. The best way (at least in my opinion) of doing this without bringing Javascript into the picture is to use tables. You can avoid the terrible table tags by using the display: table CSS style. Using tables you can vertically and horizontally centre the contents of your table cell, but the table first has to cover the entire page.

Since you can't use position: absolute on a table, you need to give it a <div> wrapper which does that. Then you can set the width and height of your table to 100% to cover the entire view port.

Finally you put a div with the CSS style display: inline-block; to allow it to be centred horizontally by the text-align style of it's parent. Tadaa! That div is now completely centred no matter what.

jsFiddle example

---

Hope this helped

Answer 3

Centering a div has to be with respect with the window. Here is how you can do that.

Assuming #div is the box to be centered

$("#div").css({
    marginTop : ($(window).height() - $(this).height())/2,
    marginLeft : ($(window).width() - $(this).width())/2,
});

In case you have a absolute position box, then use top and left instead of marginTop and marginLeft respectively.

$("#div").css({
    top : ($(window).height() - $(this).height())/2,
    left : ($(window).width() - $(this).width())/2,
});

Answer 4

I used code given in this Using jQuery to center a DIV on the screen answer to center my popup and it worked brilliant. You probably want to use position:absolute and top and left attributes, instead of just margin-left and margin-top