Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click

#jquery

#bootstrap

#cookie

#click

#modal

#popup

#onclick

This is a variation on the tip found here. See an example of the finished result here.

I added the option to delay the Bootstrap modal display, and changed the click trigger from an id to a class. So, multiple elements can now trigger the cookie which tells the modal to not reappear ever again — e.g. a "Don't show this anymore" button and a "Subscribe" button can both trigger it. Essentially, my favorite use is enabling users that have already subscribed to the newsletter to not be bothered to do so again.

Necessary Scripts and Styles

<!-- 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>

Basic Bootstrap Modal HTML (with cookie-triggering class in the buttons)

<div class="modal fade" id="myModal">
  <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 'nothanks' class on the buttons -->
        <button class="btn btn-default nothanks" data-dismiss="modal" aria-hidden="true">Don't Show Me This Again</button>
        <button class="btn btn-primary nothanks" data-dismiss="modal" aria-hidden="true">Subscribe</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Javascript to include on the page with the modal.

// Delayed Modal Display + Cookie On Click
$(document).ready(function() {

  // If no cookie with our chosen name (e.g. no_thanks)...
  if ($.cookie("no_thanks") == null) {

    // Show the modal, with delay func.
    $('#myModal').appendTo("body");
    function show_modal(){
      $('#myModal').modal();
    }

    // Set delay func. time in milliseconds
    window.setTimeout(show_modal, 3000);
    }

  // On click of specified class (e.g. 'nothanks'), trigger cookie, with expiration in year 9999
  $(".nothanks").click(function() {
    document.cookie = "no_thanks=true; expires=Fri, 31 Dec 9999 23:59:59 UTC";

  });
});

The whole thing together

(Copy and paste directly onto your html page.)

<head>
  <!-- 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>
</head>

<body>

  <div class="modal fade" id="myModal">
    <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 'nothanks' class on the buttons -->
          <button class="btn btn-default nothanks" data-dismiss="modal" aria-hidden="true">Don't Show Me This Again</button>
          <button class="btn btn-primary nothanks" data-dismiss="modal" aria-hidden="true">Subscribe</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <script>
    // Delayed Modal Display + Cookie On Click
    $(document).ready(function() {

      // If no cookie with our chosen name (e.g. no_thanks)...
      if ($.cookie("no_thanks") == null) {

        // Show the modal, with delay func.
        $('#myModal').appendTo("body");
        function show_modal(){
          $('#myModal').modal();
        }

        // Set delay func. time in milliseconds
        window.setTimeout(show_modal, 3000);
        }

      // On click of specified class (e.g. 'nothanks'), trigger cookie, which expires in 100 years
      $(".nothanks").click(function() {
        $.cookie('no_thanks', 'true', { expires: 36500, path: '/' });
      });
    });
  </script>

</body>

That's it!