Skip to main content
1 of 2
Clive Portman
  • 2.9k
  • 19
  • 36

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">&times;</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();
});
Clive Portman
  • 2.9k
  • 19
  • 36