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，我想它。

Answer 1

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

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

Answer 2

你必须做几件事：

将“提醒栏”的position CSS属性更改为fixed，只是正常（删除该属性）。
将您的JavaScript更改为prepend alertdiv，而不是追加它。这将使它成为身体的第一件事。
。
$（ '主体'）前面加上（$ alertdiv）;
正常滑动$ alertdiv。

现在，您在代码中未考虑的内容是您多次运行alertbar时会发生的情况。你会在身体上附加不止一个。如果这是一个问题，请尝试这样做：

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

现在只有在身体不存在的情况下才会在身体前面。

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

Answer 3

如果你想保留position: fixed，那么只需将正文的顶部填充扩展到警告框的大小。

$("#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);
}

点击事件相同。

Answer 4

您可以在单独的div中包含其余内容（以便向下推），然后在其中插入警报栏

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

4 个答案: