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

当前的行为是它正确显示在页面顶部，但是当 submnit 按钮向下滚动时，我希望这个栏不是从页面顶部出现，而是从“当前页面视图”的顶部出现（这有意义吗？）并且没有下推页面的内容（这就是它现在所做的）。

是否有可能以简单的方式实现这一点（我自己不是盒子里最锋利的工具）？

谢谢

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 回答