Question

我需要为我的Grails网站实现类似于StackOverflow网站顶部显示的橙色和可关闭对话框，只要SO检测到它是您的第一次访问。（对于演示，只需在私人/隐身模式下启动浏览器，然后转到 www.stackoverflow.com）

我主要对前端组件感兴趣。

您知道在哪里可以找到可以完成这项工作的JavaScript / CSS / HTML库和/或代码吗？或者你可能直接拥有代码源？

Answer 1

这就像为div创建CSS样式一样简单，如下所示：

div.notification
{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
    z-index: 1000;
    /* style it the way you want; background, font-weight etc. */
}

然后当您想要显示通知时，将此类添加到DOM中。例如，使用jQuery：

function displayNotification(text)
{
    var notification = $('<div></div>')
        .addClass('notification')
        .text(text)
        .click(function() { notification.remove(); });
    $('body').append(notification);
}

displayNotification('Hello World!');

当然你可以使它更先进，但这是基本的想法。

Answer 2

这很简单，他们会检查当你点击页面时是否设置了“first_visit = false”类型的cookie，如果不是则显示该消息。

这可能有帮助..我回答了类似的问题。 Modal box + checkbox + cookie

Answer 3

UI范例称为flash消息或通知程序。

http://rubypond.com/articles/2008/07/11/useful-flash-messages-in-rails/

StackOverflow使用以下标记和CSS：

<table id="notify-table">
  <tbody><tr style="" class="notify">
    <td class="notify">
      1 new answer has been posted - <a onclick="heartbeat.answers.update()">load new answers.</a>
    </td>
    <td class="notify-close">
      <a onclick="notify.close()" title="dismiss this notification">×</a>
    </td></tr>
  </tbody>
</table>

#notify-table {
color:#735005;
font-weight:bold;
left:0;
position:fixed;
top:0;
width:100%;
z-index:100;
}

notify.close()会在通知程序上设置display: none;，并根据您的需要设置cookie，以便在消息被解除后不会显示该消息。

Answer 4

或者使用jquery更容易：

$('div.notification').fadeIn();

带

    .notification { display:none;}

和

$('div.notification').fadeOut(function() { $(':parent .close').click(); });

我在哪里可以找到“第一次来这里？” StackOverflow网站的JavaScript组件？

4 个答案: