如何使我的“警报栏”下推网站的所有内容？

Question

我写了一个类似这样的警告栏：

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 那样做。

- TIMEX

---

它会推动网站，因为它正在移动DIV，而不仅仅是让它出现。 DIV是阻塞元素，因此如果插入一个DIV，所有内容都会移动。只是不像在这个网站上看到的那样缓慢。 - George Johnston

Answer 1

我认为你的问题在于position: fixed。它会使你的元素相对于窗口定位，使其脱离正常流程。

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

- tjm

Answer 2

有几件事情你必须要做：

• 将“alert bar”的CSS属性position更改为普通而非fixed（删除该属性）。

• 更改JavaScript代码，使用prepend方法添加alertdiv，而不是append。这将使alertdiv成为body中的第一个元素。

  $('body').prepend($alertdiv);

• 正常向下滑动$alertdiv。

现在，在你的代码中没有考虑到重复运行alertbar时会发生什么情况。你会将多个alertbar附加到body上。如果这是一个问题，请尝试执行以下操作：

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

现在只有在 body 不存在时才会添加到其前面。

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

- Adam Terlson

Answer 3

如果你想保持“position: fixed”，那么只需要将body的顶部padding扩展到alertbox的大小即可。

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

您还需要返回 padding。

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

点击事件同理。

- natedavisolds

Answer 4

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

- Steve Greatrex