Question

我有div class="centerMessage"。这个div在加载页面后的某个点插入到DOM中。我想更改此div上的CSS以使其居中。我尝试了下面的CSS功能，但它没有用。有人知道这样做的方法吗？

function centerPopup() {
var winWidth = $(window).width();
var winHeight = $(window).height();
var positionLeft = (winWidth/2) - (($('.centerMessage').width())/2);
var positionTop = (winHeight/2) - (($('.centerMessage').height())/2);
$('.centerMessage').live( function(){
$(this).css("position","absolute");
$(this).css("top",positionTop + "px");
$(this).css("left",positionLeft + "px");
});
}

Answer 1

如果我对您要实现的目标的假设是正确的，那么您不需要任何Javascript来执行此操作。它可以通过一些简单的CSS来实现。

.centerMessage {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px; /* half of the height */
    margin-left: -300px; /* half of the width */
    width: 600px;
    height: 300px;
    background: #ccc;
}

演示：http://jsbin.com/awuja4

Answer 2

.live()不接受JUST函数。如果你想在现场发生一些事情，它也需要一个事件，比如click。如果您希望每个.centerMessage始终发生某些事情，则需要插件.livequery()

Answer 3

我相信以下内容适用于FF＆amp; Webkit的。

div.centerMessage{
    position: absolute;
    width: /* width */;
    height: /* height */;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

Answer 4

我知道这已经回答了，但我想我会提供一个 working jsFiddle demo ，使用像最初想要的那样的JavaScript，而不是使用< strong> live（），我使用 setInterval（）：

首先，我们需要声明一些变量供以后使用：

var $centerMessage,
    intervalId;

OP的问题是他们不知道什么时候会创建div，所以考虑到这一点，我们创建了一个函数来做到这一点并通过 setTimeout（）来调用它模拟这个div创作：

function createDiv() {

    $('<div class="centerMessage">Center Message Div</div>').appendTo("body");

}

$(function() { setTimeout("createDiv()", 5000); });

最后，我们需要创建一个函数，使用 setInterval（）以100ms的速率检查div是否已经创建并在创建时，通过修改div来实现jQuery的：

function checkForDiv() {

    $centerMessage = $('.centerMessage');

    if ($centerMessage.length) {

        clearInterval(intervalId);

        var $window = $(window),
            winHeight = $window.height(),
            winWidth = $window.width(),
            positionTop = (winHeight / 2) - ($centerMessage.height() / 2),
            positionLeft = (winWidth / 2) - ($centerMessage.width() / 2);


        $centerMessage.css({

            "display" : "block",
            "position" : "absolute",
            "top" : positionTop.toString() + "px",
            "left" : positionLeft.toString() + "px"

        });

    }

}

$(function() { intervalId = setInterval(checkForDiv, 100); });

Answer 5

尝试使用此

$（'。centerMessage'）。live（'click'，function（）{

Answer 6

试试这个

$('#foo').on('click', function() {
  alert($(this).text());
});

$('#foo').trigger('click');

OR

$('#foo').live('click', function() {
  alert($(this).text());
});

$('#foo').trigger('click');

你可以在.live（）中使用jQuery .css（）吗？

6 个答案: