使用Bootstrap，让警报框记住关闭操作 [英] Using Bootstrap, have alert box remember close action
问题描述
我正在尝试创建一个Bootstrap警报框，该框会记住用户单击关闭按钮的时间.我想我需要将这些信息存储在cookie中.理想情况下，该cookie仅会在该当前会话中持续使用，然后它们返回时，该框将再次出现.
I am trying to create a Bootstrap alert box that remembers when users click the close button. I guess I need to store that information in a cookie. Ideally that cookie will only last for that current session, and next they return the box will appear again.
我正在使用jQuery-Cookie插件.我将其上传到了/jquery-cookie-master.可以在此处找到.
I am using the jQuery-Cookie plugin. I uploaded it to /jquery-cookie-master. Plugin can be found here.
这是我到目前为止通过遵循代码在这里找到.
This is what I've got so far by following code found here.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery-cookie-master/jquery.cookie.js"></script>
<script>
function runOnLoad(){
if($.cookie('alert-box') == null) {
$.cookie('alert-box', 'open', { expires: 7 });
} else if($.cookie('alert-box') == 'close') {
$(".close").hide();
}
</script>
HTML:
<body onload="runOnLoad()">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()">×</button>
<p>
<strong>FORUM UPGRADE:</strong> In light of our recent surge in popularity we upgraded our forum and unfortunately lost all the old threads in the process.
</p>
<p>
In an effort to kick-start the forum again we need your help. Sign up now and leave a post (it's free). Once we reach 100 threads every member will receive a special gift.
</p>
<p>
<a href="http://example.com/forum/#/entry/register">
<strong>Sign up to the forum now</strong>
</a>.
</p>
</div>
</body>
不幸的是，它不起作用.当我单击关闭按钮时，它不记得该操作，并且如果刷新页面，警报框将再次出现.
Unfortunately it's not working.When I click the close button it does not remember that action and if I refresh the page the alert box will appear again.
我做错了什么?
推荐答案
代码问题
-
在您的代码
onload函数中，您似乎在设置cookie值，这很奇怪，因为您只想在用户关闭警报框后才设置cookie.Code issues
In your codes
onloadfunction you seem to be setting the cookie value which is strange since you only want to set the cookie when the user has closed the alert box.您的按钮具有
href属性.这和无效的html一样没有必要.Your button has a
hrefattribute. This is not necessary as well as invalid html.为了简单地隐藏并记住警报框的状态，您必须将事件绑定到关闭按钮，以便您知道用户单击关闭的时间.
In order to simply hide and remember the state of the alert box you have to bind an event to the close button so that you know when the user has clicked close.
要使用jQuery绑定事件，可以使用以下代码:
To bind an event using jQuery you can use the following code:
// When document is ready replaces the need for onload jQuery(function( $ ){ // Grab your button (based on your posted html) $('.close').click(function( e ){ // Do not perform default action when button is clicked e.preventDefault(); /* If you just want the cookie for a session don't provide an expires Set the path as root, so the cookie will be valid across the whole site */ $.cookie('alert-box', 'closed', { path: '/' }); }); });要隐藏警报框，您只需检查正确的cookie值并隐藏该框即可:
To hide the alert box you should simply check for the correct cookie value and hide the box:
jQuery(function( $ ){ // Check if alert has been closed if( $.cookie('alert-box') === 'closed' ){ $('.alert').hide(); } // ... Binding code from above example });这篇关于使用Bootstrap，让警报框记住关闭操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
