Here's how I approach what I think you're trying to do. I have a global Notice setup, which includes a lightswitch field called showNotice
, a heading called noticeTitle
and a text field called noticeText
.
Note I only check for the existence of the cookie. I'm not interested in the value.
{# Only show the notice at all if it's turned on in the CP #}
{% if notice.showNotice %}
{# Header bar shows all the time but the View button within shows only when the cookie has been set - controlled via CSS #}
<div id="notice-headerbar">
<a href="#" id="notice-viewbutton" class="{{ not getCookie('noticed') ? 'hidden' }}">View</a>
<h2>{{ notice.noticeTitle }}</h2>
</div>
{# The notice itself is only shown if the cookie has NOT been set. Controlled by CSS #}
<div id="popupnoticeholder" style="display: {{ getCookie('noticed') ? 'none' : 'block' }}">
<section id="noticetext">
<a href="#" id="closenotice">×</a>
<p>{{ notice.popupNoticeText }}</p>
</section>
</div>
{% endif %}
If they hit the close button, I set the cookie using Javascript. There's also the option to show the notice again by clicking the View button.
$('#closenotice').click(function(e) {
$('#noticeholder').slideUp();
Cookies.set('noticed', 'yes');
e.preventDefault();
$('#notice-openbutton').removeClass('hidden').fadeIn();
});
$('#notice-openbutton').click(function(e) {
$('#noticeholder').slideDown();
e.preventDefault();
$(this).fadeOut();
});