Уведомьте панель, подобную stackoverflow's

Хотя они ни в коем случае не официальны, общие методы, которые я применяю, привели бы к чему-то вроде этого:

• Создают элемент, который будет действовать как контейнер уведомления в разметке , но скрывать его по умолчанию (это может быть сделано многочисленные пути - JavaScript, внешний CSS или встроенные стили).
• Сохраняют сценарии ответственными за поведение уведомления за пределами разметки . В примере выше, Вы видите, что существует onclick, а также другая функция, которая стреляет в загрузку страницы, содержавшуюся в разметке. Хотя это работает, я рассматриваю это как смешивание представления и поведения.
• Сохраняют представление уведомления содержавшимся во внешней таблице стилей.

Снова, это просто мои общие методы, указанные в контексте Вашего вопроса. Вещь с веб-разработкой, поскольку природа Вашего вопроса уже показывает, состоит в том, что существует столько способов сделать то же самое с теми же результатами.

Использование StackOverflow jQuery - JS кодируют Вас отправленный от ТАК вызов jQuery. Это сделает точно, что Вы не хотите почти ни с каким кодом. Наиболее рекомендуемый.

В этом ответе есть полное решение.

Копирование и вставка:

Это разметка, изначально скрытая, чтобы мы могли ее скрыть:

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

Вот примененные стили:

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    float:right;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left:3px;
    padding-right:3px
}

.close-notify a {
    color: #fff;
}

А это javascript (с использованием jQuery):

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

И вуаля. В зависимости от настроек вашей страницы вы также можете захотеть отредактировать верхний край основного поля на дисплее.

Вот его демонстрация в действии .

Я вижу следующую функцию jQuery? Я полагаю, что HTML-код вставляется в div с помощью id notify-container.

Я не понимаю, как этот JS используется и вызывается на основе определенных событий, возможно, кто-нибудь сможет объяснить.

var notify = function() {
var d = false;
var e = 0;
var c = -1;
var f = "m";
var a = function(h) {
    if (!d) {
        $("#notify-container").append('<table id="notify-table"></table>');
        d = true
    }
    var g = "<tr" + (h.messageTypeId ? ' id="notify-' + h.messageTypeId + '"' : "");
    g += ' class="notify" style="display:none"><td class="notify">' + h.text;
    if (h.showProfile) {
        var i = escape("/users/" + h.userId);
        g += ' See your <a href="/messages/mark-as-read?messagetypeid=' + h.messageTypeId + "&returnurl=" + i + '">profile</a>.'
    }
    g += '</td><td class="notify-close"><a title="dismiss this notification" onclick="notify.close(';
    g += (h.messageTypeId ? h.messageTypeId : "") + ')">&times;</a></td></tr>';
    $("#notify-table").append(g)
};
var b = function() {
    $.cookie("m", "-1", {
        expires: 90,
        path: "/"
    })
};
return {
    showFirstTime: function() {
        if ($.cookie("new")) {
            $.cookie("new", "0", {
                expires: -1,
                path: "/"
            });
            b()
        }
        if ($.cookie("m")) {
            return
        }
        $("body").css("margin-top", "2.5em");
        a({
            messageTypeId: c,
            text: 'First time here? Check out the <a onclick="notify.closeFirstTime()">FAQ</a>!'
        });
        $(".notify").fadeIn("slow")
    },
    showMessages: function(g) {
        for (var h = 0; h < g.length; h++) {
            a(g[h])
        }
        $(".notify").fadeIn("slow");
        e = g.length
    },
    show: function(g) {
        $("body").css("margin-top", "2.5em");
        a({
            text: g
        });
        $(".notify").fadeIn("slow")
    },
    close: function(g) {
        var i;
        var h = 0;
        if (g && g != c) {
            $.post("/messages/mark-as-read", {
                messagetypeid: g
            });
            i = $("#notify-" + g);
            if (e > 1) {
                h = parseInt($("body").css("margin-top").match(/\d+/));
                h = h - (h / e)
            }
        } else {
            if (g && g == c) {
                b()
            }
            i = $(".notify")
        }
        i.children("td").css("border-bottom", "none").end().fadeOut("fast", function() {
            $("body").css("margin-top", h + "px");
            i.remove()
        })
    },
    closeFirstTime: function() {
        b();
        document.location = "/faq"
    }
 }
} ();