這是我第一次訪問堆棧溢出，我看到一個漂亮的標題消息，它顯示一個文本和一個關閉按鈕。標題消息就像堆棧溢出

標題欄是固定的，非常適合吸引訪問者的注意。我想知道你們中的任何人是否知道獲得相同類型標題欄的代碼。

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

相關問題