如何讓我的「提醒欄」按下我網站上的所有內容？

我寫了一個提醒欄是這樣的：如何讓我的「提醒欄」按下我網站上的所有內容？

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

如何讓我的「提醒欄」按下我網站上的所有內容？

回答

相關問題