这是我第一次访问堆栈溢出，我看到一个漂亮的标题消息，它显示一个文本和一个关闭按钮。标题消息就像堆栈溢出

标题栏是固定的，非常适合吸引访问者的注意。我想知道你们中的任何人是否知道获得相同类型标题栏的代码。

2009-03-03 Akshit

相关的CSS将包括：

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

More information about position:fixed：

与位置的元素：固定定位在指定的坐标相对于浏览器窗口。元素的位置由“左”，“顶”，“右”和“底部”属性指定。元素保持在该位置，无论滚动。适用于IE7（严格模式）

如果IE6支持对您很重要，您不妨去research workarounds。

来源

2009-03-03 06:39:51

快速纯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();

来源

2009-03-03 09:59:49 James

不是有一个拨动追加行后只是这样做： bar.style.display = message ===''？ 'none'：'block';然后当你想摆脱吧： myMessageBar.setMessage – 2010-01-09 18:47:08

切换能见度对我来说似乎是一个更加直观的API;我希望一个空白的信息显示为一个空白的信息，而不是根本没有酒吧。 – Matchu 2010-03-07 21:00:35

你会如何调用myMessageBar.toggleVisibility（）作为酒吧的onclick？ – 2011-01-12 20:39:23

下面是使用jQuery的替代方法，也将向上/向下滑动上显示/隐藏。

添加以下HTML在网页中<body>标记之后：

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

这个CSS添加到您的样式表

#msgBox { 
    padding:10px; 
    background-color:Orange; 
    text-align:center; 
    display:none; 
    font:bold 1.4em Verdana; 
} 
#msgCloseButton{ 
    float:right;  
}

最后这里是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>

来源

2010-03-07 20:38:38 TGuimond

更新：

Check out the DEMO

代码中使用：

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

我如果你想创建自己的，请查看jQuery的slideToggle函数。

来源

2011-01-04 05:44:00 Sarfraz

是这样的吗？

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

不过，在这里我想他们淡出了第一棒，然后他们把主容器起来，这样会是类似的东西：

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

来源

2011-01-04 05:54:34 Nabab

标题消息就像堆栈溢出

回答

更新：

Check out the DEMO

相关问题