Show popup at once Bootstrap Jquery

 Show popup at once Bootstrap Jquery

 Sometimes we want to show login signup or welcome popup at once to per user . we can show popup at once to user by using jQuery .
 We can show popup at once with jquery using two methods

 1. localStorage- localStorage is relatively new concept that stores data with no expiration date on client side.

 2. Cookies - Cookies also stores data on client side but the main difference between localStorage and Cookies is that Cookies can manipulated from the server side.

 For our example we are using Bootstrap Modal Popup .to use Bootstrap Modal Popup you should call bootstrap js and css class.

<!-- BootStrap Modal Popup -->
<button type="button" id="btntpr" class="btn btn-info  btn-lg" data-toggle="modal" data-target="#signupnow">Open Modal</button>

<!-- Modal -->
<div id="signupnow" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Register</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<!-- BootStrap Modal Popup -->

Now first we are using localStorage to show popup at once per user

$(document).ready(function() {
    var isshow = localStorage.getItem('status');
    if (isshow== null) {
        localStorage.setItem('isshow', 1);

        // Show popup here
        $('#signupnow').show();
    }
});

2. Show Popup at once with cookies

Set a jQuery cookie to show popup only once

$(document).ready(function() {
    var isshow = $.cookie("isshow");
    if (isshow == null) {
        $.cookie("isshow", 1); // Store

        // Show popup here
        $('#jPopup').show();
    }
});

Set cookies with expire time to show popup

 

 $(document).ready(function(){
   if ($.cookie('isshow') != '1') {
    //show popup here
    $.cookie('isshow', '1', { expires: 60}); }
   });

   So these are the methods to show bootstrap popup at once per user .

   Related Posts -
   1. How to Use Bootstrap datepicker
   2.All Responsive Media queries with range
   3. Show Bootstrap popup at once per user
   4.Refresh a page after certain delay jquery
   5. reload and redirect in jQuery