jquery notification bars that can be dismissed?

后端未结

关注

 3  805

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

相关标签:

3条回答

一个人的身影

2020-12-28 09:34
Super easy to build your own. Just make it the first <div> under the <body> 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) {
    $('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}
```
Demo: http://jsfiddle.net/AlienWebguy/5hjPY/
0 讨论(0)
发布评论:

提交评论
- 加载中...
醉酒成梦

2020-12-28 09:37

I've actually made something very similar to this for a couple of projects of mine.

There's a JSFiddle demo, which works but it's a straight lift from my personal libs - code that could probably use cleaning and optimising, but it give a good impression of how it works.

The added bonus of my code is that it doesn't show duplicate items - it "pings" the currently existing one. Clicking anywhere on the notification closes it.

The only drawback I can see for this is that it covers up some of the main content, but that's fixable if you put the notifications container at the top of your content with position: static.

Please let me know if there are any specifics you want me to explain; there's rather a lot of code to run through in one answer.

I'll probably write a jQuery plugin that does this at some point, seeing as there's only one example. I'll post it here when I do.

NB. The setInterval() is only used for demonstration purposes. Also, there are different coloured alerts (success, info, warning, error - green, blue, orange and red respectively).

0 讨论(0)
发布评论:

提交评论
- 加载中...
夕颜

2020-12-28 09:42

You may want to try "noty" https://github.com/needim/noty

0 讨论(0)
发布评论:

提交评论
- 加载中...