好的,我有这段代码:
//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并且没有defaut显示。
答案 0 :(得分:2)
居中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,
});
答案 1 :(得分: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();
});
答案 2 :(得分:0)
我使用这个Using jQuery to center a DIV on the screen答案中给出的代码来集中我的弹出窗口并且它非常棒。您可能希望使用position:absolute
和top
以及left
属性,而不仅仅是margin-left
和margin-top
答案 3 :(得分:0)
我无法让自己真正阅读你的代码,所以我为你设置了几个例子:
这种风格很简单。只需将元素位置设置为绝对值,将其推至50%/ 50%,然后使用负边距将其缩小一半的宽度和高度。
这更棘手。在没有将Javascript引入图片的情况下,最好的方法(至少在我看来)是使用表格。您可以使用display: table
CSS样式来避免可怕的表标记。使用表格,您可以垂直和水平居中表格单元格的内容,但表格首先必须覆盖整个页面。
由于您无法在表格上使用position: absolute
,因此您需要为其提供一个<div>
包装器。然后,您可以将表格的宽度和高度设置为100%以覆盖整个视图端口。
最后,您使用CSS样式display: inline-block;
放置一个div,以允许它通过它的父text-align
样式水平居中。 Tadaa!无论如何,这个div现在都完全集中。
希望这有帮助