javascript - 尝试动态创建一个 div 并将其居中

Question

我有一个函数叫做:

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。我该如何调整它？

Answer 1

试试这个:

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 的引用。您可能正在考虑普通的事件绑定(bind)，您传递给它的匿名函数有一个新的上下文，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();
}