javascript - Stack Overflow のようなヘッダー メッセージ

Question

スタック オーバーフローにアクセスしたのはこれが初めてで、テキストと閉じるボタンを表示する美しいヘッダー メッセージを見ました。

ヘッダーバーは固定されており、訪問者の注意を引くのに最適です. 同じ種類のヘッダー バーを取得するコードを知っている人がいるかどうか疑問に思っていました。

Answer 1

純粋な 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();

Answer 2

アップデート：

---

デモをチェックしてください

使用したコード：

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

---

独自に作成したい場合はslideToggle、jQueryの機能を確認してください。

Answer 3

関連する CSS には次のものが含まれます。

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

についての詳細情報position:fixed:

position: fixed を持つ要素は、ブラウザー ウィンドウに対して指定された座標に配置されます。要素の位置は、"left"、"top"、"right"、および "bottom" プロパティで指定されます。要素はスクロールに関係なくその位置に留まります。IE7 (厳密モード) で動作します

IE6 のサポートが重要な場合は、回避策を調べてください。

Answer 4

このようなもの？

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

ただし、ここでは、最初にバーがフェードアウトしてからメイン コンテナーが表示されるので、次のようになります。

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