如何让我的“提醒栏”按下我网站上的所有内容？

我写了一个提醒栏是这样的：如何让我的“提醒栏”按下我网站上的所有内容？

alertmsg{ 
     font-family:Arial,Helvetica,sans-serif; 
     font-size:135%; 
     font-weight:bold; 
     overflow: hidden; 
     width: 100%; 
     text-align: center; 
     position: fixed; 
     top: 0px; 
     left: 0px; 
     background-color: #fff; 
     height: 56px; 
     color: #000; 
     font: 20px/40px arial, sans-serif; 
     display:none; 
     padding-top:12px; 
     -webkit-box-shadow: 3px 3px 5px #888; 
     -moz-box-shadow: 3px 3px 5px #888; 
     box-shadow: 3px 3px 5px #888; 
} 

function alertbar(m, timeout){ 
    if(!timeout){ 
     var timeout = 3000; 
    } 
    var $alertdiv = $('<div id = "alertmsg"/>'); 
    $alertdiv.text(m); 
    $alertdiv.bind('click', function() { 
     $(this).slideUp(200); 
    }); 
    $(document.body).append($alertdiv); 
    $("#alertmsg").slideDown("slow"); 
    setTimeout(function() { $alertdiv.slideUp(200) }, timeout); 
    return false 
}

很简单。我呼叫alertbar("Go go go!");将此警报下降。

但是，它覆盖了身体的页面。我希望它在整个页面（所有元素）上“下推”......有点像StackOverflow，我猜。

来源

2011-06-29 TIMEX

它推动网站，因为它正在增长/移动的DIV - 不仅使其出现。 DIV是阻止元素，所以如果你插入一个元素，一切都会改变。只是不像在这个网站上看到的那样。 –

在css中缺少'＃'？ – Dogbert

我认为这是position: fixed那是你的问题。这会将你的元素相对于窗口放置并将其从正常流程中取出。

使用position:static（或relative）并确保alertmsg元素位于标记的顶部。

来源

2011-06-29 21:06:59 tjm

你可以换你的内容的其余部分在一个单独的DIV（被按下），然后插入您的提醒栏前

来源

2011-06-29 21:05:55

有几件事情你必须做到：

改变“提醒栏”的position CSS属性不fixed，只是正常（删除属性）。
将您的JavaScript改为prepend的alertdiv，而不是追加它。这将使它成为体内的第一件事。

$（'body'）。prepend（$ alertdiv）;
正常滑动您的$ alertdiv。

现在，您在代码中没有考虑到的内容是当您多次运行alertbar时发生的情况。您将在正文中附加多个。如果这是一个问题，尝试做这样的事情：

var exists = $('#alertmsg').length > 0; 
var $alertdiv = exists ? $('#alertmsg') : $('<div id="alertmsg" />');

现在只有预先准备的身体，如果不存在的话。

if (!exists) 
    $('body').prepend($alertdiv);

来源

2011-06-29 21:07:23

如果你想保持position: fixed然后就扩大了身体的顶部填充，位于alertbox的大小。

$("#alertmsg").slideDown("slow", function() { 
    var paddingTopStr = "+" + $(this).outerHeight().toString() + "px"; 
    $('body').css({ paddingTop: paddingTopStr }); 
});

您还将有后返回填充：

setTimeout(function() { 
    var paddingTopStr = "-" + $(this).outerHeight().toString() + "px"; 
    $('body').css({ paddingTop: paddingTopStr }); 
    $alertdiv.slideUp(200) }, timeout); 
}

同为click事件。

来源

2011-06-29 21:22:04 natedavisolds

如何让我的“提醒栏”按下我网站上的所有内容？

回答

相关问题