I've been through the forums and rea开发者_JS百科d many posts relating to my question, but I couldn't really find the answer I'm looking for.
I want to display a message with jquery to the user on page load and allow them to close the div by clicking on the close link. Once closed, the script should remember not to open again during that session. I guess it would use a cookie.
Here's the 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&os=win&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>
As you can see, this advises the IE6 user to upgrade their browser
I would use the jQuery cookie plugin.
Bind a handler for the close link's onclick event that creates the cookie. Before displaying the div, check for the cookie.
<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>
get the cookie functions from here then you can set alertBox to be hidden by default and :
$(document).ready(function(){
if(readCookie('warnedIE')==null){
$('.alertbox').show();
createCookie('warnedIE','true',30);
}
});
I think you gonna find some help in that link:
http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/
精彩评论