Làm cách nào để hiển thị thông báo bật lên cho người dùng bằng jquery?

Question

Tôi đang phát triển một ứng dụng yêu cầu người dùng đó phải được thông báo về một số sự kiện nền tức là lời mời từ người dùng khác, thời gian nhắc nhở, v.v.

Bất cứ khi nào sự kiện xảy ra, bộ điều khiển sẽ được hiển thị và cửa sổ nhỏ sẽ hiển thị cho người dùng.

Tôi nên tiến hành như thế nào để đạt được điều này. Công nghệ/công cụ nào sẽ giúp tôi. Tôi đang sử dụng jQuery, JSF 2.0 và Spring 3.0.

Answer 1

này sẽ đưa ra một thông báo tương tự như stackoverflow

jQuery

$("#notification").fadeIn("slow").append('your message'); 
$(".dismiss").click(function(){ 
     $("#notification").fadeOut("slow"); 
}); 

HTML

<div id="notification" style="display: none;"> 
    <span class="dismiss"><a title="dismiss this notification">x</a></span> 
</div> 

CSS

#notification { 
    position:fixed; 
    top:0px; 
    width:100%; 
    z-index:105; 
    text-align:center; 
    font-weight:normal; 
    font-size:14px; 
    font-weight:bold; 
    color:white; 
    background-color:#FF7800; 
    padding:5px; 
} 
#notification span.dismiss { 
    border:2px solid #FFF; 
    padding:0 5px; 
    cursor:pointer; 
    float:right; 
    margin-right:10px; 
} 
#notification a { 
    color:white; 
    text-decoration:none; 
    font-weight:bold 
} 

Ngoài ra hãy xem tại mplungjan's answer về cách lắng nghe để cập nhật máy chủ và tải nhắn

Answer 2

Jquery ui hộp thoại là những gì bạn đang tìm kiếm. Nó sẽ có ích cho bạn. Mặc dù có rất nhiều plugin khác có sẵn. Đây là đơn giản nhất ..

Answer 3

HTML:

<input type="button" id="pop" value="Submit"/> 
<div id="popup"> 
    <div id="topbar"> TITLE..</div> 
    <div id="content">Here is you content...</div> 
    <input type="button" id="ok" value="OK"/> 
</div> 

CSS:

#popup { background:#ccc; -moz-border-radius: 10px; width:300px; height: 200px; padding: 5px; position: absolute; left: 50%; margin-left: -150px; z-index: 500; display:none } 
#topbar { background:#ddd; -moz-border-radius: 10px; padding:5px; height:20px; line-height:20px } 
#content { padding:5px; -moz-border-radius: 10px; text-align:center } 
#ok { position: absolute; left: 140px; top: 180px } 

jQuery:

$(function(){ 
    $('#pop').click(function(){ 
     $('#popup').fadeIn().css('top',$(document).height()/2); 
    }); 
    $('#ok').click(function(){ 
     $('#popup').fadeOut(); 
    }); 
}); 

Answer 4

Sử dụng mã từ @Anu's suggestion - my fiddle, bạn có thể chỉ cần thêm một cuộc thăm dò

$(document).ready(function() { 
    $(".dismiss").click(function(){$("#notification").fadeOut("slow");}); 

    setInterval(function() { 
    $.get("ping.jsp?userid=<%= userID %>",function(message) { 
     if (message) $("#notification").fadeIn("slow").html(message); 
    }); 
    ,10000); 
}) 

thông điệp có thể bao gồm một dấu thời gian để xem nếu bạn đã thông báo trước đó thay vì gửi một tin nhắn trống nếu không cần thông báo số

Lựa chọn thay thế: Long poll hoặc Comet