4

ページで、フォームを送信した後に感謝のメッセージを表示したいと思います。このJqueryを使用しました

$(document).ready(function(){
    $("#contactForm").submit(function(data) {
        $.post('web_contactoPrueba.php', {nombre: $('#nombre').val(), email: $('#email').val(), asunto: $('#asunto').val(), telefono: $('#telefono').val(), comentario: $('#comentario').val(), enviar: 'yes'}, function(data) {
            $("<div />", { class: 'topbar', text: data }).hide().prependTo("body")
            .slideDown('fast').delay(5000).slideUp(function() { $(this).remove(); $(location).attr('href','http://www.delagua.es/index.html');});
        }, 'text')
        return false;
    });
});

そしてこのCSS

.topbar {
    background: #F68A0E;
    height: 60px;
    line-height:60px;
    font-size:25px;
    border-bottom: solid 2px #EEE;
    padding: 3px 0;
    text-align: center;
    color: white;
}

現在の動作では、ページの上部に正しく表示されますが、送信ボタンが下にスクロールしているため、このバーをページの上部からではなく、「ページの現在のビュー」の上部から表示したいと思います(これは意味がありますか?) ページのコンテンツを押し下げることはありません (これが現在の動作です)。

これを簡単な方法で達成することは可能ですか (ボックス内の最も鋭いツールではありません)。

ありがとう

4

1 に答える 1

3

CSSプロパティで固定された位置を使用することで、通知バーを常に現在のビューポートの上部に配置することが簡単にできると思います。

.topbar {
    background: #F68A0E;
    height: 60px;
    line-height:60px;
    font-size:25px;
    border-bottom: solid 2px #EEE;
    padding: 3px 0;
    text-align: center;
    color: white;

    /* properties to "lock" the top bar at the top of the viewport. */
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
}

jsFiddleの例

于 2012-07-28T20:06:44.327 に答える