标题消息就像在 Stack Overflow 上一样

2022-01-11 00:00:00 header javascript html css

这是我第一次访问堆栈溢出，我看到了一个漂亮的标题消息，其中显示了一个文本和一个关闭按钮.

This is the first time I visited stack overflow and I saw a beautiful header message which displays a text and a close button.

标题栏是固定的，非常适合吸引访问者的注意力.我想知道你们中是否有人知道获得相同标题栏的代码.

The header bar is fixed one and is great to get the attention of the visitor. I was wondering if anyone of you guys know the code to get the same kind of header bar.

推荐答案

快速纯 JavaScript 实现:

Quick pure JavaScript implementation:

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

相关文章