jquery notification bars that can be dismissed?

Question

I\'ve been looking for a notification bar like the one on this site that displays at the top notifying a user of changes etc. It should have the ability of being closed. All

Answer 1

Super easy to build your own. Just make it the first

under the tag, and set the css to something like this:

#notify {
    position:relative;
    width:100%;
    background-color:orange;
    height:50px;
    color:white;
    display:none;
}

Then on your notifications, simply slide it down:

$('#notify').html('new message').slideDown();

And add a click event to close it and clear out the notification:

$('#notify').click(function(){
    $(this).slideUp().empty();
});

Demo: http://jsfiddle.net/AlienWebguy/Azh4b/

If you wanted to really make it like StackOverflow's you'd simply set a cookie when you issue the notification, and then every page load show all notifications which have applicable cookies.

If you want multiple notifications, change #notify to .notify and stack em up. Something like this:

$('.notify').live('click',function() {
    $(this).slideUp('fast',function(){$(this).remove();});
});

$(function(){
    notify('You have earned the JQuery badge!');
    notify('You have earned the Super Awesome badge!');
});

function notify(msg) {
    $('
').prependTo('body').addClass('notify').html(msg).slideDown();
}

Demo: http://jsfiddle.net/AlienWebguy/5hjPY/

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...