Dismiss Bootstrap Modal with jQuery Cookie (On Click)

Posted September 18th, 2014

Just posted this tip at Coder Wall, as well.

I recently added a Bootstrap modal popup to my website with an embedded Mailchimp newsletter subscribe form. But I didn’t want to bombard users that weren’t interested, or continue asking people that already signed up. Lots of folk seem to like saving a cookie in the browser for 7 days at a time, but I prefer to let the user have more control. So I wanted the modal to stop appearing completely for users that 1) subscribed to the newsletter or 2) clicked a “no thanks” dismissal button inside the modal. The results can be seen at twwd.org. Here’s how I did it:

1. Include the Scripts and Stylesheets on Your Site

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Cookie JS for Modal -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>

The best place to include the CSS stylesheet is anywhere inside the <head>, and the best place for all the JS scripts just before the end of the closing </body> tag. For WordPress sites, the former can probably (on most themes) be added to your header.php and the latter to your footer.php.

2. Add the Modal to a Page

This is a basic, barely modified modal taken straight from the BS site. Note the dismiss class on the buttons in the modal-footer section.

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Your Mailchimp form goes here, or whatever you like. Example input below.</p>
        <div class="input-group">
          <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
          <input type="email" class="form-control" placeholder="Email Address">
        </div>
      </div>
      <div class="modal-footer">
        <!-- Make sure to include the 'dismiss' class on the buttons -->
        <button class="btn btn-default dismiss" data-dismiss="modal" aria-hidden="true">Don't Show Me This Again</button>
        <button class="btn btn-primary dismiss" data-dismiss="modal" aria-hidden="true">Subscribe</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

3. Call the Javascript

Paste this code on the same page, below everything else we’ve already included.

<script type="text/javascript">
  
  // Delayed Modal Display + Cookie On Click
  $(document).ready(function() {
   
    // If no cookie with our chosen class...
    if ($.cookie("dismiss") == null) {
      
      // Show the modal, with the delay function
      $('#myModal').appendTo("body");
      function show_modal(){
        $('#myModal').modal();
      }
     
      // Set the delay function time in milliseconds
      window.setTimeout(show_modal, 3000);
      }
   
    // On click of the chosen class, trigger the cookie
    $(".dismiss").click(function() {
      document.cookie = "dismiss=true";
    });
  });

</script>

That’s it! Now, because I added my dismiss class to both the Subscribe and Don’t Show Me This Again buttons, clicking either one of them will keep the modal from displaying again. That is, until the user clear the cookies in their browser, of course. You can add the dismiss class to anything clickable, really, and get the same effect.

Hope this helps!

Tags: