Javascript 我如何制作我的"；警告栏“；推下我网站的所有内容？

我写了一个警告栏，如下所示：

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
}

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

alertmsg{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：135%；
字体大小：粗体；
溢出：隐藏；
宽度：100%；
文本对齐：居中；
位置：固定；
顶部：0px；
左：0px；
背景色：#fff；
高度：56px；
颜色：#000；
字体：20px/40px arial，无衬线；
显示：无；
填充顶部：12px；
-网络工具包盒阴影：3px 3px 5px#888；
-莫兹盒阴影：3px 3px 5px#888；
盒影：3px 3px 5px#888；
}
函数alertbar（m，超时）{
如果（！超时）{
var超时=3000；
}
变量$alertdiv=$（''）；
$alertdiv.text（m）；
$alertdiv.bind（'click'，function（）{
美元（本）.slideUp（200）；
});
$（document.body）.append（$alertdiv）；
$（“#alertmsg”）.slideDown（“slow”）；
setTimeout（函数（）{$alertdiv.slideUp（200）}，超时）；
返回错误
}

很简单。我调用

alertbar（“Go Go！”）

以使此警报下拉列表

---

但是，它覆盖了正文的页面。我想让它在整个页面（所有元素）上排序为“下推”…我想有点像StackOverflow那样。

你可以将其余内容（要下推）包装在一个单独的div中，然后在它前面插入警告栏。

我想这是你的问题所在。

位置：fixed

。这将相对于窗口放置元素，并使其脱离正常流

---

使用

position:static

（或

relative

）并确保

alertmsg

元素位于标记的顶部。

您必须做以下几件事：

• 将“警报栏”的

  position

  CSS属性更改为不

  fixed

  ，而只是正常（删除该属性）
• 将JavaScript更改为alertdiv的

  prepend

  ，而不是附加它。这将使它成为身体的第一件事
  $（'body'）.prepend（$alertdiv）

• 正常向下滑动$alertdiv

现在，代码中没有考虑的一点是，当您多次运行

alertbar

时会发生什么。您将向主体追加多个。如果这是一个问题，请尝试这样做：

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
}

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

---

如果您想保持

位置：固定

，则只需将身体顶部填充物扩展到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);
}

---

单击事件也是如此。

它向下推站点，因为它正在增长/移动DIV，而不仅仅是使其出现。div是阻塞元素，因此如果插入一个，所有内容都将发生移动。只是不像在这个网站上看到的那样慢。