Javascript 头消息就像堆栈溢出一样

这是我第一次访问stack overflow，我看到了一条漂亮的标题消息，其中显示了一条文本和一个关闭按钮

---

标题栏是固定的，很容易引起访问者的注意。我想知道你们中是否有人知道获得相同类型标题栏的代码。

相关css将包括：

position: fixed;
top: 0;
width: 100%;

:

具有position:fixed的图元位于相对于浏览器窗口的指定坐标处。元素的位置由“左”、“上”、“右”和“下”属性指定。无论滚动如何，元素都保持在该位置。在IE7中工作（严格模式）

---

如果IE6支持对您很重要，您可能希望。

快速纯JavaScript实现：

function MessageBar() {
    // CSS styling:
    var css = function(el,s) {
        for (var i in s) {
            el.style[i] = s[i];
        }
        return el;
    },
    // Create the element:
    bar = css(document.createElement('div'), {
        top: 0,
        left: 0,
        position: 'fixed',
        background: 'orange',
        width: '100%',
        padding: '10px',
        textAlign: 'center'
    });
    // Inject it:
    document.body.appendChild(bar);
    // Provide a way to set the message:
    this.setMessage = function(message) {
        // Clear contents:
        while(bar.firstChild) {
            bar.removeChild(bar.firstChild);
        }
        // Append new message:
        bar.appendChild(document.createTextNode(message));
    };
    // Provide a way to toggle visibility:
    this.toggleVisibility = function() {
        bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
    };
}

如何使用它：

var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();

---

这里有一个使用jQuery的替代方法，它在显示/隐藏时也会向上/向下滑动

在页面中的

标记后添加以下HTML：

<div id="msgBox">
    <span id="msgText">My Message</span>           
    <a id="msgCloseButton" href='#'>close</a>
</div>

最后，这里是设置关闭按钮的javascript以及显示和隐藏消息栏的函数：

/* Document Ready */
$(function () {
    SetupNotifications();
});

SetupNotifications = function () {
    //setup close button in msgBox
    $("#msgCloseButton").click(function (e) {
        e.preventDefault();
        CloseMsg();
    });
}

DisplayMsg = function (sMsg) {
    //set the message text
    $("#msgText").text(sMsg);
    //show the message
    $('#msgBox').slideDown();
}

CloseMsg = function () {
    //hide the message
    $('#msgBox').slideUp();
    //clear msg text
    $("#msgtText").val("");
}

要执行简单测试，您可以尝试以下方法：

<a href='#' onclick="javascript: DisplayMsg('Testing');">Show Message!</a>

更新：

---

使用的代码：

$(function(){
  $('#smsg_link').click(function(){
  showMessage('#9BED87', 'black', 'This is sample success message');
  return false;
});

$('#imsg_link').click(function(){
  showMessage('#FFE16B', 'black', 'This is sample info message');
  return false;
});

$('#emsg_link').click(function(){
  showMessage('#ED869B', 'black', 'This is sample error message');
  return false;
});
});



/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window

params:
  - bgcolor:     The background color for the message box
  - color:     The text color of the message box
  - msg:       The message text
*/
var interval = null;

function showMessage(bgcolor, color, msg)
{
    $('#smsg').remove();
    clearInterval(interval);

    if (!$('#smsg').is(':visible'))
    {
        if (!$('#smsg').length)
        {
            $('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
                position:'fixed',
                top:0,
                left:0,
                width:'98%',
                height:'30px',
                lineHeight:'30px',
                background:bgcolor,
                color:color,
                zIndex:1000,
                padding:'10px',
                fontWeight:'bold',
                fontSize:'18px',
                textAlign:'center',
                opacity:0.8,
                margin:'auto',
                display:'none'
            }).slideDown('show');

            interval = setTimeout(function(){
                $('#smsg').animate({'width':'hide'}, function(){
                    $('#smsg').remove();
                });
            }, 3000);
        }
    }
}

$（函数（）{
$（“#smsg_链接”）。单击（函数（）{
showMessage（“#9BED87”，“黑色”，“这是示例成功消息”）；
返回false；
});
$（'#imsg_link'）。单击（函数（）{
showMessage（“#FFE16B”、“黑色”、“这是示例信息消息”）；
返回false；
});
$（'emsg_link'）。单击（函数（）{
showMessage（“#ED869B”，“黑色”，“这是示例错误消息”）；
返回false；
});
});
/*
Sarfraz提供的showMessage功能：
-------------------------
在窗口顶部显示精美的信息
参数：
-bgcolor：消息框的背景色
-颜色：消息框的文本颜色
-消息文本
*/
var区间=null；
函数showMessage（bgcolor、color、msg）
{
$（'#smsg'）。删除（）；
间隔时间；
如果（！$（'#smsg'）。是（':visible'））
{
如果（！$（'#smsg'）。长度）
{
$（''+msg+''）.appendTo（$（'body'））.css({
位置：'固定'，
排名：0，
左:0,，
宽度：'98%'，
高度：'30px'，
线宽：'30px'，
背景：bgcolor，
颜色：颜色，
zIndex:1000，
填充：'10px'，
字体权重：'粗体'，
字体大小：'18px'，
textAlign:“中心”，
不透明度：0.8，
保证金：'自动'，
显示：“无”
}).slideDown（“show”）；
间隔=设置超时（函数（）{
$（'#smsg'）。设置动画（{'width'：'hide'}，函数（）{
$（'#smsg'）。删除（）；
});
}, 3000);
}
}
}

---

如果您想创建自己的，请查看jQuery的功能。

类似的功能

$("#bar").slideUp();

然而，在这里，我认为他们首先淡出了酒吧，然后他们把主容器带了上来，所以是这样的：

$("#bar").fadeOut(function(){
    $("#container").animate({"top":"0px"});
});

---

只需执行以下操作，而不是在附加行后进行切换：bar.style.display=message==''无'：'块'；然后，当您想要摆脱这个条时，只需：myMessageBar.setMessage（“”）；切换可见性对我来说似乎是一个更直观的API；我希望空白消息显示为空白消息，而不是完全没有条。如何将myMessageBar.toggleVisibility（）作为条的onclick调用？@leif81一个onclick处理程序。因此添加，

bar.onclick=this.toggleVisibility到消息栏的最后一行@999-很好。（有一个点击的酒吧）我正在寻找的东西，移动整个网站下来，而不是像一个下拉列表menu@harrison：不知道你的意思，你能举个例子吗？好的，等等。我会在网上找一个。我想它叫闪光信息？我找不到一个例子，除非我在StackOverflow上发现一个新的徽章，这意味着当信息显示时，网站的内容不应该保持静止。他们应该被信息压下去。信息不应该掩盖内容。我认为这是更好的解决方案，因为它会将整个页面向下移动！
$("#bar").fadeOut(function(){
    $("#container").animate({"top":"0px"});
});