0

現在、HTML/CSS/Javascript に取り組んでいます。メッセージと呼ばれるdiv idと、メッセージを表示するjavascript関数があり、数秒後に別の関数を呼び出して非表示にします。

showMessage 関数が最初に呼び出されたときにメッセージ div がわずかに右に押し出され (画面の中央にないことが非常に目立ちます)、5 秒後に hideMessage が実行されて div メッセージが非表示になることを除いて、これはすべてほとんど機能しています。

次に showMessage 関数を再度呼び出すと、div は画面の中央に正しく配置されます。

id メッセージの css は get のみdisplay: none;です。

以下は、div を表示する前に showMessage 関数が追加する messageError クラスの css です。

.messageError
{
    position: absolute;
    top: -48px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ff3d3d;
    border: #c10000 solid thin;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

以下は、JavaScriptが使用するコードです

function showMessage(persistent, message, type)
{
    $('#message').css({
        position:'absolute',
        padding: '10px',
        left: ($(window).width() - $('#message').outerWidth())/2
    });

    $("#message")
        .hide()
        .html(message);

    if (type == "error")
    {
        $("#message").addClass("messageError");
    }
    else if (type == "workingComplete")
    {
        $("#message").addClass("messageWorkingComplete");
    }

    $("#message").fadeIn("slow");
    if (!persistent)
    {
        setTimeout("hideMessage()", 5000);
    }
}

function hideMessage()
{
    $("#message")
        .fadeOut("slow");
         removeClass("messageError")
        .removeClass("messageWorkingComplete")
}

中央に表示するために閉じてリロードする必要なく、最初にdivが中央になるようにするにはどうすればよいですか。

ご協力いただきありがとうございます。

4

1 に答える 1

0

通常、私は使いたくない：

    width:auto;

divを中央に配置しようとしている場合。幅を割り当てるので、

    margin:0 auto;

トリックを行うことができます。また、css が質問に投稿されていないクラスを割り当てていることにも気付きました。それも問題になる可能性があります。クロムを使用している場合は、結果を確認したら、それを右クリックしてから「検査」要素を使用します。これにより、インスペクターが開き、すべての css (その他の非常に便利なもの) が表示され、問題がどこにあるかを知ることができます。よろしくルイス

于 2012-10-06T01:05:22.157 に答える