Display a popup only once with JQuery and Cookies

Display a popup only once with JQuery and Cookies

Published Apr 13,2019 by Kailash Singh

0 Comment     6468 Views    

In this tutorial, we are going to learn about how to create display a popup only once with JQuery and Cookies.

Now we will put the once show only feature for every user who enters the site.

For this we have to include Jquery Cookie so you can save a cookie to the client browser to identify that the user has already opened the site.
 

Step 1 :- Add links in your code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js" ></script>

Step 2 :-  Add bootstrap modal popup code.

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <h2>Welcome To Elevenstech Web Tutorial</h2>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Step 3 :-  Add JQuery code.

<script>
  $(document).ready(function() {   
      if($.cookie("kailashs") == null) {
          $('#myModal').modal('show');
          $.cookie("kailashs", "2");
      }
  });
</script>

Hope this will help our developers.

Because we believe Mantra means CodingMantra