我如何使我的“警报栏”推下我的网站的一切?

I wrote an alert bar like this:

我写了这样一个警告栏:

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
}

Pretty simple. I call alertbar("Go go go!"); to have this alert drop down.

很简单。我打电话给alertbar(“Go Go Go Go Go !”);把警报降下来。

However, it covers the body's page. I want it to sort of "push down" on the entire page (all the elements)....sort of like * does it I guess.

但是，它覆盖了主体的页面。我希望它“压低”整个页面(所有元素)....有点像*那样的网站。

4 个解决方案

#1

I think it's the position: fixed that is your problem. This will place your element relative to the window and take it out of the normal flow.

我认为这是你的立场:解决问题是你的问题。这将使您的元素相对于窗口放置，并将其从正常流中取出。

Use position:static (or relative) and make sure the alertmsg element is at the top of the markup.

使用位置:静态(或相对)并确保alertmsg元素位于标记的顶部。

#2

There's a couple things you must do:

有几件事你必须做:

Change the position CSS attribute of the "alert bar" to not be fixed and just be normal (remove that property).
更改“警告栏”的位置CSS属性，使其不被固定，并且只是正常的(删除该属性)。
Change your JavaScript to prepend the alertdiv, rather than append it. This will make it the first thing in the body.

将JavaScript更改为在alertdiv之前，而不是添加它。这将是身体的第一件事。

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

$('体').prepend($ alertdiv);
Slide your $alertdiv down normally.

正常滑下$alertdiv标签。

Now something that you didn't take into account in your code is what happens when you run alertbar more than once. You'll append more than one to the body. If this is a concern, try doing something like this:

在代码中没有考虑到的是当你多次运行alertbar时会发生什么。您将向主体添加多个。如果这是个问题，试着做这样的事情:

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

Now only prepend to the body if it doesn't exist already.

现在只有在主体不存在的情况下才会出现。

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

#3

If you want to keep the position: fixed then just expand the body's top padding to the size of the alertbox.

如果你想保持这个位置:固定，那就把身体的顶部填充扩展到报警框的大小。

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

You will also have to return the padding after:

您还必须返回填充之后:

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

Same for the click event.

单击事件也是如此。

#4

You could wrap the rest of your content (to be pushed down) in a separate div and then insert your alert bar before it

您可以将剩下的内容(被向下推)放在一个单独的div中，然后在它之前插入您的警告栏。

#1