Question

I am trying to build a text-bar above the website like Twitter or SO does. Any advice on how to build this would be great. I do not know what you call this feature, but maybe there is a jQuery plugin to do it?

The functionality I’m thinking of is “message” [x] to close the alert.

Thanks for your help!

Answer 1

No need to unnecessarily use jQuery Plugins. Just put the HTML you wanna display as a panel.
This is the code for Stack Overflow notifier

The HTML

<div id="notify-container">
    <div id="notify--1" style="">
        <span class="notify-close"><a title="dismiss this notification" onclick="$('#notify-container').slideUp();">×</a></span>
        <span class="notify-text">
            Welcome to Q&amp;A for professional and enthusiast programmers — check out the <a href="/faq">FAQ</a>!
        </span>
    </div>
</div>

The CSS

 #notify-container {
    color: #735005;
    font-size: 130%;
    font-weight: bold;
    text-align: center;
}
#notify-container div {
    background-color: #F4A83D;
    border-bottom: 1px solid #D6800C;
    padding: 7px 0;
}
#notify-container span.notify-close {
    background-color: #FAD163;
    border: 2px solid #735005;
    cursor: pointer;
    display: block;
    float: right;
    margin-right: 20px;
    padding-left: 4px;
    padding-right: 4px;
    text-decoration: none;
}
#notify-container a {
    color: #735005;
    text-decoration: underline;
}
#notify-container span.notify-close a {
    text-decoration: none;
}

If you wanna see it in action, view the fiddle here

Also, if you are particular about the close button, then you might need some ajax calls that stops showing the notifier at a page refresh or like wise events when the user has closed the notifier by clicking on x mark. SO does it by calling

StackExchange.notify.closeFirstTime()

Also worthwhile to read are

1. How to show popup message like in stackoverflow
2. Notify panel similar to stackoverflow's

P.S: To close the fiddle, I have used jQuery slideUp. If you are using pure javascript feel free to use

document.getElementById('notify-container').style.display ='none';