4

好的，我有这个代码：

    //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并且默认不显示。

4

4 回答 4

2

居中 div 必须与窗口有关。这是您如何做到这一点的方法。

假设#div是要居中的框

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

如果您有一个absolute位置框，请分别使用topandleft而不是marginTopand marginLeft。

$("#div").css({
    top : ($(window).height() - $(this).height())/2,
    left : ($(window).width() - $(this).width())/2,
});
于 2012-05-06T02:27:11.513 回答
1

这可能会有所帮助，

 $.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();
     });
于 2015-03-19T14:05:52.950 回答
0

我使用此Using jQuery 中给出的代码将 DIV 居中在屏幕上，以使我的弹出窗口居中，效果非常好。您可能想要使用position:absoluteandtop和left属性，而不仅仅是margin-leftandmargin-top

于 2012-05-06T02:19:09.577 回答
0

我无法让自己真正阅读您的代码，因此我为您设置了几个示例：

固定尺寸元素的绝对居中

这种风格很容易。只需将元素位置设置为绝对，将其推至 50%/50% 并使用负边距将其宽度和高度拉回一半。

jsFiddle 示例

动态大小的元素的绝对居中

这更棘手。最好的方法（至少在我看来）在不使用 Javascript 的情况下做到这一点是使用表格。您可以通过使用display: tableCSS 样式来避免可怕的表格标签。使用表格，您可以将表格单元格的内容垂直和水平居中，但表格首先必须覆盖整个页面。

由于你不能position: absolute在桌子上使用，你需要给它一个<div>包装器来做到这一点。然后您可以将表格的宽度和高度设置为 100% 以覆盖整个视口。

最后，您放置一个具有 CSS 样式的 div，display: inline-block;以使其按text-align其父级的样式水平居中。多多！无论如何，该 div 现在完全居中。

jsFiddle 示例

希望这有帮助

于 2012-05-06T02:27:47.730 回答