javascript - 将元素设置在指定容器的中间

Question

在我的应用程序中，当用户完成某些操作时，我想在屏幕中间显示一些信息。（就像闪信一样）

现在我创建一个函数来做到这一点：

var createFlashMessage = function(message, parentDom, time) {
        parentDom = $(parentDom);
        var mask = parentDom.children().first();
        if(!mask.is('message-mask')) {
            mask = $('<div>').addClass('message-mask');
            mask.hide().appendTo(parentDom);
        }
        var messageSpan = $('<span>').html(message).appendTo(mask);
        var conWidth = parentDom.width(), conHeight = parentDom.height();
        messageSpan.css({
            left:Math.floor(conWidth / 2-messageSpan.width()/2),
            top:Math.floor(conHeight / 2-messageSpan.height()/2)
        }).fadeIn(500,function () {
            $(this).delay(time || 3000).fadeOut();
        });
    };

这是遮罩 div 的 css 样式：

---

.message-mask 
{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

但是，当我运行它时，我发现容器无法将掩码 div 定位在正确的位置。

怎么做？

Answer 1

不确定，因为我更像是一个 C# 人，但我认为应该更像这样。

        left:Math.floor((conWidth / 2)-(messageSpan.width() /2)),
        top:Math.floor((conHeight / 2)-(messageSpan.height() /2))

Answer 2

增加z-index你的弹出窗口，float-left然后你可以这样做：

messageSpan.css('margin-left', ((conWidth - messageSpan.width()) / 2));
messageSpan.css('margin-top', ((conHeight - messageSpan.height()) / 2));

消息掩码也应该更像这样：

.message-mask  {
    position:fixed;
    display: none;
    width: 100%;
    height: 100%;   
    left:0px;
    top:0px;
    z-index: 9998;
}

然后，当您显示弹出窗口时，您会取消隐藏背景。