[英]Show/Hide div on button click and save Cookies
我將這個 javascript 代碼用於 cookie 和顯示/隱藏;
$(document).ready(function () {
if (Boolean(readCookie('hide'))) {
$('.pop-up').hide();
$('.pop-up').fadeOut(1000);
}
$('.close-button').click(function (e) {
$('.pop-up').fadeOut(700);
$('#overlay').removeClass('blur-in');
$('#overlay').addClass('blur-out');
e.stopPropagation();
createCookie('hide', true, 1)
return false;
});
function createCookie(name, value, days) {
if (days == 1) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires2 = "";
document.cookie = name + "=" + value + "; expires=" + expires + "; path=/";
// $.cookie(name, value, { expires: days });
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
});
我需要在同一頁面上有 10 個按鈕,但我不能。 因為如果我單擊關閉按鈕(X),所有按鈕都會隱藏。 我需要一張一張的藏起來。
我嘗試更改名稱和值但未成功。
這是 HTML;
<div id="overlay" class="cover blur-in">
<div class="content"></div>
</div>
<div class="row pop-up">
<div class="box small-6 large-centered">
<a href="#" class="close-button">✖</a>
<h3 class="popup">Welcome</h3>
<p>info </p>
<p>info</p>
<a href="#" class="button">press for facebook</a>
</div>
</div>
您的 jsfiddle 似乎不起作用(空白),但總體思路是使用close_button
類循環遍歷所有元素並為每個元素添加一個偵聽器,如下所示:
$('.close-button').each(function(i, obj) {
$(this).click(function (e) {
$('.pop-up').eq(i).fadeOut(700);
$('#overlay').removeClass('blur-in');
$('#overlay').addClass('blur-out');
e.stopPropagation();
return false;
})
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.