Cách hiển thị thông báo bật lên như trong Ngăn xếp ngăn xếp

Question

Tôi muốn thêm thông báo bật lên như tin nhắn xuất hiện trên Stack Overflow khi tôi không đă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ì? Được thực hiện bằng thư viện jquery?

Answer 1

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

Answer 2

Cũng kiểm jQuery UI Dialog

Answer 3

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

Answer 4

EDIT: Mã bên dưới 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, trước tiên hãy truy cập trang web, v.v. để 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 this question nơi tôi thể hiện cách thực hiện việc này hoặc chỉ cần đi thẳng đến số example.

---

Sau đây là cách Stackoverflow làm nó:

Đây là đánh dấu, ban đầu ẩn vì vậy chúng tôi có thể dần giảm âm 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à những phong cách á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à thì đấy. 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 lề trên của phần thân trên màn hình.

Here is a demo of it in action.

Answer 5

Dưới đây là những gì tôi tìm thấy từ xem nguồn StackOverflow. Hy vọng sẽ tiết kiệm thời gian cho ai đó. Chức năng showNotification được sử dụng cho tất cả các tin nhắn 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;} 

Đó là mát mẻ cách 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 tất cả các thông điệp (không phai màu) thực sự mờ dần sau 30 giây.

Answer 6

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 javascript và css.