Question

我正在尝试在网站上方建立一个文本栏，如Twitter or SO does.任何有关如何构建此内容的建议都会很棒。我不知道你称之为这个功能，但也许有一个jQuery插件可以做到这一点？

我正在考虑的功能是“消息”[x]来关闭警报。

感谢您的帮助！

Answer 1

无需不必要地使用jQuery插件。只需将您想要显示的HTML显示为面板即可这是Stack Overflow通知程序的代码

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>

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

如果你想看到它的实际效果，view the fiddle here

此外，如果您特别关闭关闭按钮，那么您可能需要一些ajax调用，在用户通过单击x标记关闭通知程序时停止在页面刷新时显示通知程序或类似明智事件。所以通过调用

来做到这一点

StackExchange.notify.closeFirstTime()

另外值得一读的是

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

jQuery slideUp

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

Answer 2

此处提供了使用jQuery的Twitter通知栏的简单实现： http://pandiyachendur.blogspot.com/2010/07/twitter-like-notification-bar-in-jquery.html

在此处查看此行动：http://jsbin.com/ifidu4/3/edit

如何：Stackoverflow / Twitter JS对话框

2 个答案: