Jquery 弹出模式必须居中

Question

好的，我有这个代码:

    //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

现在，每当用户单击具有 poplight 类的元素时，就会执行上面的代码，它应该显示具有 popup_block 类的 div 但在此之前调用 ajax 函数，我没有问题但是那个 div(具有 popup_block 的类)的中心主义丢失了，或者它看起来非常不稳定，因为你看到那里有一个代码实现了那个 div 的中心主义但它没有，它只在我指定时居中css 上的位置或 css 上那个 div 的宽度和高度，但我不想那样做，jquery 函数应该那样做(见代码，它已经在那里实现)。也许我的代码中缺少一些东西，或者我只是错过了一些东西，但不管是什么，我都不知道。请帮忙，我只想在调用时将那个 div 居中。提前谢谢你。

-那个div(有一个popup_block类)是固定定位的，z-index:99999并且默认不显示。

Answer 1

居中 div 必须与窗口相关。这是你如何做到这一点。

假设#div是要居中的框

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

如果你有一个 absolute 位置框，那么使用 top 和 left 而不是 marginTop 和 marginLeft 分别。

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