Set cookie for Bootstrap modal

JavaScript
1

I have a Bootstrap modal that is shown when a user reaches the bottom of the page:

<script>
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
    	$('#newsletterModal').modal('show');   
   }
});
</script>

I obviously don’t want the modal to appear each and every time but just once. If the user fills out the form the modal shouldn’t appear for lets say a year, when the user dismisses the modal shouldn appear for lets say 1/2 a year. How can I accomplish this?

Edit:
For now I have added just a cookie for 1/2 a year:

if (Cookies.get('nl_popup') == null){
	$('#newsletterModal').modal('show');
	Cookies.set('nl_popup', 'yes', { expires: 180 });
}

That is working ok but I have an aditional question. What I would like to realize is that if a user has filled out the form for receiving the newsletter he or she will be presented with another modal with a special offer (at least if a special offer is available) But this should happen in a subsequent session (not in the same session). What would be the best way to accomplish that?

Thank you in advance.

2

effectively, you’re setting a timebomb cookie.

Set a cookie (or use localstorage) when a user has actually filled out the form (not just dismissed the popup). “ShowOffer” or whatever.
Also set a sessionstorage item “SameSession” or whatever.

On page load:

If ShowOffer is set:
  If SameSession is not set:
        Unset ShowOffer (You may want to delay this until the user dismisses the offer)
        Display offer.
3

I’m the kind of user that when a modal asking me to subscribe to anything (free or otherwise) pops in, I right-click it and block it.

Cookies are imperfect. No matter what you do, cookies disappear. Sometimes intentionally, sometimes accidentally.

m_hutley’s suggestion to use localstorage is a much better solution, but also not perfect. localstorage is dependent upon browser history, and if a user clears browser history on exit or uses incognito mode the localstorage will clear.

If your site does not require a login, there are not any perfect solutions, really. On the flip side, if users logon to your site, you can use a database to keep track of things like this.

Just my two cents.

V/r,

^ _ ^

4

@WolfShade. I know that as well. But that are the requirements. Offcourse a login suuation would be way easier to deal with, but like I said in the OP this is about subscribing to a newsletter, so some data is available from those subscribers. When just using Cookies what would be the best approach? Even if they are imperfect

5

@m_hutley nailed it. You set the cookie when the form has been submitted (I assume you’re using AJaX for the submit) and the server returns a successful process. *

V/r,

^ _ ^

*Successful process: I set the first five characters of what is being returned to "YES: " or "ERR: " and use that in determining what message will be displayed to the user, and other processing. I use a switch case statement.

.done(function(data){
     var errYes = data.split(': ')[0], message = data.split(': ')[1];
     switch(errYes){
          case 'ERR':
               //error stuff here
          break;
          case 'YES':
               //successful stuff here
          break;
          }
     });
6

@WolfShade: Yes I am using AJAX for submit, actually it is a 2 step process. First they subscribe after which they receice an email with a link to confirm the subscription. So I should indeed set the Cookie for newsletterModal in the second Ajax success call. But then? This is where I get stucked. I only want to show that second modal to people that have signed up. I realy have no clue where to start or end

7

I’m assuming that the link opens your site in a browser and presents this second modal? Does clicking the link confirm subscription? Or does the second modal contain a button to click for confirming the subscription?

If the former (click confirms), then as soon as the second modal appears that’s when you set the cookie.

If the latter (modal button confirms), then as soon as the button is clicked you set the second cookie.

Both instances would be a completely new function.

HTH,

^ _ ^

9

@WolfShade. When they click the link in the email they will indeed be redirected to a success message on the website. But the second modal will only be available if there is a special offer is active:

SELECT *
  FROM `special_offers`
 WHERE `isActive` = 1;
 LIMIT 1

So showing the second modal not only depends on if a cookie was set or not but also on if a there is content for that second modal.

Sorry for my ignorance but I don’t know how else to explain this. Let me try again:

  1. Peron visit website for first time
  2. Modal for newsletter subscription opens
  3. Person subsribes and confirms
  4. Cookie nl_popup is set (expires whenever)
  5. Person visits the site again Modal with special offer opens (if one available)
  6. etc etc etc

So how do I set this up? I really have no idea

Thank you for the patience

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.