0

私のアプリでは、ユーザーが操作を完了したときに画面の中央に情報を表示したいと考えています。（フラッシュメッセージのように）

これを行う関数を作成します。

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 を正しい位置に配置できないことがわかりました。

作り方は？

4

2 に答える 2

0

私はC＃の人なので、わかりませんが、もっとこのようにすべきだと思います。

        left:Math.floor((conWidth / 2)-(messageSpan.width() /2)),
        top:Math.floor((conHeight / 2)-(messageSpan.height() /2))
于 2012-06-14T07:35:33.650 に答える
0

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;
}

次に、ポップアップを表示すると、背景の非表示が解除されます。

于 2012-06-14T07:41:30.090 に答える