标题消息就像在堆栈溢出
这是我第一次访问堆栈溢出，我看到一个漂亮的标题消息，显示一个文本和一个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"}); });
