January 23, 2015

Dismiss the modal forever onclick using cookies and delay modal visibilty

It's not good if the popup is visible whenever the page is reloaded. So i decided to make your device remember the close action, so that next time when you reload the page the popup is not visible. This is a good way of an user experience. jQuery makes the cookie remember. So, multiple elements can now trigger the cookie which tells the modal to not reappear ever again. Essentially, my favorite use is enabling users that have already followed me on twitter to not be bothered to do so again. I even set the option delay to delay the visibilty of the bootstrap modal.

HTML

<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">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Follow me on twitter</h4>
      </div>
      <div class="modal-body">
        <p>This modal is loaded after 3 seconds. On click of the <strong>Don't Show Me This Again</strong> button cookie is saved and remembers even when the page is reloaded.</p>
      </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>
        <a href="https://twitter.com/vivinantony" target="_blank" class="btn btn-primary dismiss" data-dismiss="modal" aria-hidden="true">Follow</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

jQuery

// 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";
    });
  });

Attachments:

I have used external attachments.

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

Note:

If cookies are cleared the modal will be visble again.

demo

7 comments:

  1. Does it work with jquery 2.1.4?

    ReplyDelete
    Replies
    1. How can I make it expire or reactivate if I make a change?

      Delete
    2. Thanks for the great tutorial. It worked like a charm. However, I have two small questions, how can I set the cookie to expire? I noticed that even if I edit the modal if I have dismissed it for ever, it doesn't come back. Thank you very much

      Delete
    3. As the cookies are set in the browser, delete your browser cookie.

      Delete
  2. I love what you've done but when I test it, the FOLLOW button does not go anywhere. How can I link this so it works for my purposes?

    ReplyDelete

Popular Posts

Views