Cách tốt nhất để hiển thị thông báo với jQuery

Question

Tôi có một biểu mẫu CRUD đơn giản.

Tôi đang cố hiển thị thông báo thành công thú vị khi người dùng nhập hoặc xóa một bản ghi. Tôi đã thấy điều này rất nhiều trên web.

Tôi rất mới để jquery. có ai biết bất kỳ ví dụ nào cho thấy làm thế nào để làm điều này?

Về cơ bản một div sẽ từ từ mờ đi.

Answer 1

Câu hỏi của bạn hơi mơ hồ như một "thông điệp thành công thú vị" không liên quan gì nhiều.

Nếu bạn quan tâm, thông qua trả lời câu hỏi ở đây tôi đã sao chép chức năng của hai tính năng "thông báo" của Stackoverflow mà mọi người có vẻ thích: biểu ngữ ở đầu trang xuất hiện khi bạn có huy hiệu, v.v ... và các hộp màu đỏ xung quanh trang web bất cứ khi nào có sự cố với hành động. Tôi đã sử dụng các kỹ thuật tương tự như vậy để hiển thị thông điệp thành công trong các ứng dụng của tôi và khách hàng của tôi đã yêu thích chúng.

• To show the top banners - demo
• To show the red boxes - demo

Các ví dụ rất đơn giản, như tất cả những gì đang làm là thể hiện một DIV đâu đó trong tài liệu và làm mờ nó vào và ra tùy theo tình huống . Đó là tất cả những gì bạn thực sự cần để bắt đầu.

Ngoài ra, nếu bạn là người hâm mộ máy Mac (và thậm chí nếu bạn không có) có plugin jQuery Growl dựa trên hệ thống thông báo OS X. Tôi cũng là một fan hâm mộ lớn của việc sử dụng các plugin BeautyTips để hiển thị tin nhắn gần một yếu tố, như các bong bóng rất đẹp và dễ dàng để phong cách.

Answer 2

Có thể bạn đang tìm kiếm for something like this hoặc straight fade like this. Có a few effects to choose from.

Answer 3

này nên làm việc:

function showSnazzySuccessMessage(text) 
{ 
    if($("#successMessage").length < 1) 
    { 
     //If the message div doesn't exist, create it 
     $("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>"); 
    } 
    else 
    { 
     //Else, update the text 
     $("#successMessage").html(text); 
    } 
    //Fade message in 
    $("#successMessage").show('slow'); 
    //Fade message out in 5 seconds 
    setTimeout('$("#successMessage").hide("slow")',5000); 
} 

Bạn sẽ phải chơi với phong cách để làm cho nó trông theo cách bạn muốn, nhưng bạn sẽ có được ý tưởng.

Answer 4

Chỉ cần ném một div hoàn toàn mới được định vị và sử dụng hàm fadeOut để tạo hiệu ứng cho độ mờ của nó bằng hoạt ảnh chậm.

Something như thế này:

var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body')); 
newDiv.fadeOut(5000); 

Answer 5

Tôi thực sự thích jGrowl. Nó rất không phô trương khi các tin nhắn xuất hiện ở góc trái và người dùng có thể tiếp tục làm bất cứ điều gì anh ấy làm, nhưng anh ấy nhận được phản hồi từ hệ thống. Và nó cũng trông rất lạ mắt :).