jqueryを使用してユーザーにポップアップ通知を表示するにはどうすればよいですか？

Question

私はいくつかのバックグラウンドイベント、つまり他のユーザーからの招待状、リマインダータイムアウトなどについてユーザーに通知する必要があるアプリケーションを開発中です。

イベントが発生するたびにコントローラに通知され、小さなウィンドウが表示されますユーザに提供する。

これを達成するにはどうすればよいですか。どの技術/ツールが私を助けますか？私はjQuery、JSF 2.0、Spring 3.0を使用しています。

Answer 1

これは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 
} 

また、サーバーの更新を聞く方法についてmplungjan's answerを見て、メッセージ負荷

Answer 2

Jquery uiダイアログはあなたが探しているものです。それはあなたのために便利になるでしょう。他の多くのプラグインが利用可能ですが。これは最も簡単な..です

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：@Anu's suggestion - my fiddleからのコードを使用して

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

Answer 4

、あなたは単にあなたが送信するのではなく、先に通知していたかどうかを確認するメッセージがタイムスタンプを含めることができ投票

$(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); 
}) 

を追加することができます通知が必要ない場合は空のメッセージ

代替手段：Long pollまたはComet