ページの読み込み時にCookie対応のJquery通知メッセージを表示

Question

私はフォーラムを通して、私の質問に関連する多くの記事を読んだが、私が本当に答えを見つけることができなかった。

ページロード時にjqueryを使用してメッセージを表示し、閉じるリンクをクリックしてdivを閉じることができます。クローズすると、スクリプトはそのセッション中に再び開かないように覚えておく必要があります。私はそれがクッキーを使うだろうと思う。

ここではXHTMLです：あなたが見ることができるように

<div class="alertbox"> 
    <span class="message">Please upgrade your browser</span> 
    <div class="bloc_navigateurs"> 
    <a href="http://download.mozilla.org/?product=firefox-3.6.13&amp;os=win&amp;lang=fr" target="_blank"><img src="includes/themes/default/images/icons/misc/Firefox-16.gif" width="16" height="16" alt="Firefox" /></a> 
    <a href="http://www.google.com/chrome?hl=fr" target="_blank"><img src="includes/themes/default/images/icons/misc/Chrome-16.gif" width="16" height="16" alt="Chrome" /></a> 
    <a href="http://www.01net.com/telecharger/windows/Internet/navigateur/fiches/13759.html" target="_blank"><img src="includes/themes/default/images/icons/misc/IE-16.gif" width="16" height="16" alt="Internet Explorer " /></a> 
    </div> 
    <span class="close">close</span> 
</div> 

が、これは私がjQuery cookie pluginを使用することになり、ブラウザ

Answer 1

をアップグレードするためにIE6のユーザーに助言します。

クッキーを作成するクローズリンクのonclickイベントのハンドラをバインドします。 divを表示する前に、クッキーを確認してください。

<script> 
$(function() { 
    var $box = $(".alertbox"), 
     stateCookieName = 'alertbox_state', 
     alreadyClosed = $.cookie(stateCookieName); 

    // The box should already be hidden initially (using CSS preferrably). 
    // If not, uncomment the line below: 
    // $box.hide(); 

    // Show the box if it hasn't already been closed. 
    if (alreadyClosed != 1) { 
    $box.show(); 
    } 

    $box.find('.close').click(function() { 
    $box.hide(); 
    $.cookie(stateCookieName, 1); 
    }); 
}); 
</script>

Answer 2

、あなたは、デフォルトでは非表示にalertBoxを設定することができhereからクッキーの機能を得る：私はあなたがつもりそのリンクでいくつかの助けを見つけることだと思う

$(document).ready(function(){ 
    if(readCookie('warnedIE')==null){ 
    $('.alertbox').show(); 
    createCookie('warnedIE','true',30); 
    } 
}); 

Answer 3

を：
http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/