Javascript cookie dismiss forever

Question

I have modal pop-up that asks users if they would like to subscribe to my newsletter. If the user closes the modal I don't want it to appear again. Using my code below the pop-up is shown frequently multiple times a day. What would I need to add so that once dismissed the pop-up wouldn't appear again?

//custom.js
if (!readCookie("close_subcribeModal")) {
    function subcribeModal() {
      $("#subcribeModal").modal("show");
    }
    setTimeout(function () {
      subcribeModal();
    }, 5000);
}

Web page:

@if(!isset($_COOKIE['close_subcribeModal']) && @$_COOKIE['close_subcribeModal'] != "1")
<div id="subcribeModal" tabindex="-1" role="dialog" aria-labelledby="subcribeModalLabel" aria-hidden="true">
    <div role="document">
        <div class="modal-content">
            <button type="button" id="subcribeModal__close" class="cancel" data-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body">
                    <h2 class="title">Welcome</h2>
                    <p>Would you like to receive our weekly newsletter?</p>
                    <x-mail.newsletter-subscription />
            </div>
        </div>
    </div>
</div>
@endif

Does this answer your question? [How do I create and read a value from cookie?](https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) — Charlie Bamford, Jun 16 '21 at 14:00

Gass · Accepted Answer · 2021-06-21T09:23:07.750

0

It looks like you are using Bootstrap, when the modal window gets hidden (or closed) the event hidden.bs.modal gets triggered.

So we create a cookie if the event occurs (add this on the bottom of your view)

$("#subcribeModal").on('hidden.bs.modal', function() {
     Cookies.set('modalShowed','active');
});

Change if (!readCookie("close_subcribeModal")) to if(Cookies.get('modalShowed') != 'active') and get rid of this if statement @if(!isset($_COOKIE['close_subcribeModal']) && @$_COOKIE['close_subcribeModal'] != "1") on your view.

edited Jun 21 '21 at 09:23

answered Jun 16 '21 at 14:36

Gass

7,536
3
37
41

thanks for your help. So in my custom.js file I have: if(Cookies.get('modalShowed') != 'active') { function subcribeModal() { $("#subcribeModal").modal("show"); } setTimeout(function () { subcribeModal(); }, 5000); } You mentioned (this should be in your view) which shows: $("#subcribeModal").on('hidden.bs.modal', function() { Cookies.set('modalShowed','active'); }); By view do you mean on the page rather than the custom.js file? Thanks – TheBiker Jun 21 '21 at 08:50
Well I don't know if it's the only way to do it but adding it on the bottom of the view works pretty well for me.. – Gass Jun 21 '21 at 09:22

Javascript cookie dismiss forever

1 Answers1