Question

我有一个叫做的函数：

showModal(data);

当被调用时，将创建一个传入内容的模态。我试图将它居中，但我不认为'这'指的是正确的对象。

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

Answer 2

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

Answer 3

您可能还需要添加position。另一个问题可能是内容尚未添加，因此没有高度。

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

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

另一种解决方案是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% }

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

尝试创建一个div并动态地居中

3 个答案: