У меня проблема с моим jQuery: я использую скрипт, который позволяет мне центрировать элементы, предоставляя им класс, но этот скрипт не принимает правильную высоту.
Это мой HTML-код:
<div class="logoutscreen blackbackground">
<div class="window centered" style="display: block;">
[CONTENT HERE]
</div>
</div>
И этот мой код jQuery:
$(function () {
$(".centered").css({
'position': 'absolute',
'left': '50%',
'top': '50%',
'margin-left': -$(this).outerWidth() / 2,
'margin-top': -$(this).outerHeight() / 2
});
});
Проблема в том, что сценарий не принимает высоту и ширину div с.centered классом (.window), а его родителем (.logoutscreen).
Почему это происходит? :(
Использование $(this)
является вашей проблемой здесь. В отличие от других методов, вы не можете получить доступ к this
родительскому объекту как $('.centered')
в методе jQuery .css()
... по умолчанию он будет глобальным объектом window
.
То, что вы хотите сделать, это кешировать свой объект и ссылаться на него явно:
var $centered = $('.centered');
$centered.css({
position:'absolute',
left:'50%',
top:'50%',
marginLeft:((-1 * $centered.outerWidth()) / 2),
marginTop:((-1 * $centered.outerHeight()) / 2)
});
Это должно дать вам то, что вы ищете. Однако, если у вас есть несколько экземпляров, вам нужно сделать что-то вроде этого:
$centered.each(function(){
var $self = $(this);
$self.css({
position:'absolute',
left:'50%',
top:'50%',
marginLeft:((-1 * $self.outerWidth()) / 2),
marginTop:((-1 * $self.outerHeight()) / 2)
});
});
Таким образом, соблюдаются каждая уникальная height
и width
.
this
не $('.centered')
.
Использование:
$(function () {
var centered = $('.centered').first();
centered.css({
'position': 'absolute',
'left': '50%',
'top': '50%',
'margin-left': -centered.outerWidth() / 2,
'margin-top': -centered.outerHeight() / 2
});
});