Question

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

现在我创建一个函数来实现：

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

尝试，

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

Answer 3

增加弹出窗口的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;
}

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

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

3 个答案: