可以关闭的 jquery 通知栏?

标签 jquery html notifications

我一直在寻找一个通知栏,就像本网站上显示在顶部的通知栏,通知用户更改等。它应该具有关闭的能力。我能找到的 jquery 是 this one

有没有人有其他的推荐或建议?

最佳答案

super 容易构建自己的。让它成为第一个<div><body>下标记,并将 css 设置为如下所示:

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

然后在您的通知上,只需将其向下滑动即可:

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

并添加一个点击事件来关闭它并清除通知:

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

演示:http://jsfiddle.net/AlienWebguy/Azh4b/

如果您真的想让它像 StackOverflow 一样,您只需在发出通知时设置一个 cookie,然后每个页面加载都会显示所有具有适用 cookie 的通知。

如果你想要多个通知,更改#notify.notify把它们叠起来。像这样:

$('.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();
}

演示:http://jsfiddle.net/AlienWebguy/5hjPY/

关于可以关闭的 jquery 通知栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7464714/

相关文章:

jquery - 使用 jQuery 更改 html onclick 值

javascript - PhoneGap HTML5 播放器

javascript - 改变元素高度的CSS动画

javascript - jQuery 数据表使用 fnOpen() API 函数添加多个可折叠行

html - 无法显示溢出的 div 标签之外的内容

ios - 如何在 iOS 模拟器上本地化 "<AppName> Would Like to Send You Notifications"权限对话框?

typescript - 类型不可分配(TypeScript 4.1.2)

android - 通知中的 Intent 不会改变

javascript - jQuery fadeOut 回调错误

javascript - 为什么在 if 条件为 false 的情况下提交表单?