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