标题消息就像在堆栈溢出

这是我第一次访问堆栈溢出,我看到一个漂亮的标题消息,显示一个文本和一个closuresbutton。

标题栏是固定的,非常适合吸引访问者的注意。 我想知道如果你们中的任何人知道代码来获得相同types的标题栏。

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

更新:


看看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); } } } 

如果你想创build自己的,请查看jQuery的slideToggle函数。

相关的CSS将包括:

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

有关position:fixed更多信息position:fixed

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

如果IE6支持对您很重要,您可能希望研究解决方法 。

这是一个使用jQuery的替代方法,它也可以在显示/隐藏时上下滑动。

在页面中的<body>标记之后添加以下HTML:

 <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设置closuresbutton和function来显示和隐藏消息栏:

 /* 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(""); } 

要执行一个简单的testing,你可以试试这个:

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

像这样的东西?

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

然而,在这里,我认为他们首先淡出吧,然后他们把主要容器,所以这样的事情:

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