How To: Stackoverflow / Twitter JS dialogue box

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!

very cruel. have you not seen the same at Stack Overflow. that too with a close button? — naveen, Mar 31 '11 at 03:11
possible duplicate of [How to show popup message like in stackoverflow](http://stackoverflow.com/questions/659199/how-to-show-popup-message-like-in-stackoverflow) — Quentin, Mar 31 '11 at 06:25

score 2 · Accepted Answer · edited May 23 '17 at 12:19

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

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

I have made some change in it using `animate` check here - http://jsfiddle.net/PwfVh/1/ — Harsh Baid, Mar 31 '11 at 04:13

score 0 · Answer 2 · answered Mar 31 '11 at 03:13

0

A simple implementation of the Twitter notification bar using jQuery is available here: http://pandiyachendur.blogspot.com/2010/07/twitter-like-notification-bar-in-jquery.html

See it in action here: http://jsbin.com/ifidu4/3/edit

answered Mar 31 '11 at 03:13

Joel D'Souza

986
6
15

How To: Stackoverflow / Twitter JS dialogue box

2 Answers2