1

我有一个名为：

showModal(data);

当调用它时，将创建一个带有传入内容的模式。我试图将其居中，但我不认为“this”指的是正确的对象。

function showModal(data){
    $("<div class = 'modal'>").css({
        "z-index": Number($("#overlay1").css("z-index")) + 5,
        top: $(window).height() / 2 - $(this).height() / 2,
        left: $(window).width() / 2 - $(this).width() / 2
    }).append(data).appendTo("body").fadeIn();
}

它只会在屏幕上保持 0,0。我该如何调整它？

4

3 回答 3

3

试试这个：

function showModal(data){
    var modal = $("<div class = 'modal'>");
    modal.css({
        "z-index": Number($("#overlay1").css("z-index")) + 5,
        top: $(window).height() / 2 - modal.height() / 2,
        left: $(window).width() / 2 - modal.width() / 2
    }).append(data).appendTo("body").fadeIn();
}

在您的上下文中，this指的是showModal我认为的功能。但是您正在尝试使用“modal”类引用新创建的 div。您需要存储对它的引用，因为.css调用不会更改this对它内部的引用。您可能正在考虑普通的事件绑定，其中您传递给它的匿名函数具有 jQuery 定义this为相关元素的新上下文。使用css，您没有提供回调，因此 jQuery 无法更改或设置this，因为没有新的范围/上下文。我可能使用了错误的术语（上下文、范围等）...

更新：

问题似乎还data在于，由于在调用之前没有附加.css，所以模态不会有任何实质性的宽度/高度。不确定是否需要在.css调用之前完成附加到正文的模态，但这也可能有所帮助。

function showModal(data) {
    var modal = $("<div class='modal'>");
    modal.appendTo("body")
        .append(data)
        .css({
            "z-index": +$("#overlay1").css("z-index") + 5,
            top: $(window).height() / 2 - modal.height() / 2,
            left: $(window).width() / 2 - modal.width() / 2
        })
        .fadeIn();
}
于 2012-11-01T20:29:16.913 回答
0

模态的位置属性应该是绝对的。

于 2012-11-01T20:34:37.663 回答
0

您可能还需要添加position。另一个问题可能是内容还没有添加，所以没有高度。

我还将添加模态 div onload，将其移出视口，然后在运行时正确定位它showModal，否则每次都会添加新的 DIV。

您的代码的另一个问题是，在调整窗口大小时模态不会保持居中，但您可以使用 CSS 使用50%边距来解决这个问题。

另一种解决方案是 CSS 和 javascript 的组合：

var $modal = $("<div class='modal'>").css('left',-10000).appendTo('body'),
    zIndex;

function showModal(data){
    zIndex = parseInt($("#overlay1").css("z-index"), 10)+5;
    $modal.append(data).css({
        left: $modal.width()/-2,
        top: $modal.height()/-2,
        zIndex: zIndex,
        opacity: 0
    }).animate({ opacity: 1 });
}

function hideModal() {
    $modal.css('left',-10000);
}

和CSS：

.modal{ position: fixed; margin-top: 50%; margin-left: 50% }

这样，模态框最初位于最左侧，因此您仍然可以在显示它之前计算宽度/高度。

于 2012-11-01T20:38:45.283 回答