Header message just like at Stack Overflow

Question

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.

Answer 1

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';     }; } 

How to use it:

var myMessageBar = new MessageBar(); myMessageBar.setMessage('hello'); // Toggling visibility is simple: myMessageBar.toggleVisibility();