Cách hiển thị thông báo bật lên giống như trong Stack Overflow

Tôi muốn thêm thông báo bật lên giống như thông báo xuất hiện trên Stack Overflow khi tôi chưa đăng nhập và tôi cố gắng sử dụng các nút biểu quyết.

Phương pháp tốt nhất để đạt được điều đó là gì? Nó được thực hiện bằng cách sử dụng một thư viện jquery?

CHỈNH SỬA : Đoạn mã dưới đây cho biết cách sao chép các thanh hiển thị ở đầu màn hình khi bạn nhận được huy hiệu mới, lần đầu tiên truy cập trang web, v.v. Đối với các hộp thoại di chuột mà bạn nhận được khi bạn cố gắng nhận xét quá nhanh, hãy bỏ phiếu cho câu hỏi của riêng bạn, v.v., hãy xem câu hỏi này , nơi tôi hướng dẫn cách thực hiện điều này hoặc chỉ cần đi thẳng vào ví dụ .

Đây là cách Stackoverflow thực hiện:

Đây là đánh dấu, ban đầu được ẩn để chúng tôi có thể làm mờ nó trong:

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

Dưới đây là các kiểu được áp dụng:

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

Và đây là javascript (sử dụng jQuery):

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

Và Voila. Tùy thuộc vào thiết lập trang của bạn, bạn cũng có thể muốn chỉnh sửa phần thân trang trên màn hình.

Đây là một bản demo của nó trong hoạt động.

Cũng kiểm tra Hộp thoại giao diện người dùng jQuery

Tôi sử dụng jqModal , dễ sử dụng và bạn có thể đạt được một số hiệu ứng tuyệt vời

Sử dụng ModalPopup trong bộ công cụ điều khiển AJAX là một cách khác để bạn có thể có được hiệu ứng này.

Đây là những gì tôi tìm thấy khi xem nguồn StackOverflow. Hy vọng rằng sẽ tiết kiệm được thời gian cho ai đó. Chức năng showNotification được sử dụng cho tất cả các thông báo bật lên đó.

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};

//master...
showErrorPopup: function (e, h, f) {
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
    var i = function () {
        g.fadeOutAndRemove()
    };
    $(e).append(g);
    g.click(i).fadeIn("fast");
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}

css

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}

Thật thú vị khi họ sử dụng độ dài của tin nhắn để đặt thời gian chờ mờ dần. Tôi không nhận ra rằng tất cả các tin nhắn (kiểu không mờ dần) thực sự biến mất sau 30 giây.

Kiểm tra bootstrap . Có một số hiệu ứng bật lên, phương thức, chuyển tiếp, cảnh báo, mọi thứ dựa trên javascriptvà css.