Где я могу найти "Первый раз здесь?" JavaScript-компонент веб-сайта StackOverflow?

Question

Мне нужно реализовать для моего веб-сайта Grails нечто похожее на оранжевый и закрываемый диалог , который появляется в верхней части веб-сайта StackOverflow всякий раз, когда SO обнаруживает, что это ваш первый визит. (для демонстрации просто запустите браузер в режиме Private / Incognito и перейдите к www.stackoverflow.com )

Меня интересует в основном интерфейсная часть.

Знаете ли вы, где я могу найти библиотеку JavaScript / CSS / HTML и / или код, который будет выполнять эту работу? Или, может быть, у вас есть источник кода напрямую?

Answer 1

Это действительно так же просто, как создать стиль CSS для div, что-то вроде этого:

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. */
}

и затем, когда вы хотите показать уведомление, вы добавляете div с этим классом в 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

Это довольно просто, они проверяют, установлен ли тип cookie "first_visit = false" при переходе на страницу, и отображают это сообщение, если это не так.на похожий вопрос. Модальное поле + флажок + cookie

Answer 3

Парадигма пользовательского интерфейса называется флэш-сообщением или уведомителем.

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