Cookies Values Stored in Jquery

For Online paath download  file link below :-

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

<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script src="js/jquery.cookie.min.js"></script> 

HTML

<div aria-labelledby="myModalLabel" tabindex="-1" id="myModal" role="dialog" class="modal fade in">

  <div role="document" class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>

        <h4 id="myModalLabel" class="modal-title"><strong style="color:#FF0000;">Cookies Values Stored in Jquery</strong></h4>

      </div>

      <div class="modal-body">

        <h4>Text in a modal</h4>

        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

        <h4>Popover in a modal</h4>

        <p>This <a data-content="And here's some amazing content. It's very engaging. right?" title="" role="button" class="btn btn-default popover-test" href="#" data-original-title="A Title">button</a> should trigger a popover on click.</p>

        <h4>Tooltips in a modal</h4>

        <p><a title="" class="tooltip-test" href="#" data-original-title="Tooltip">This link</a> and <a title="" class="tooltip-test" href="#" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>

        <hr>

        <h4>Overflowing text to show scroll behavior</h4>

        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

       

      </div>

      <div class="modal-footer">

        <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>

        <button class="btn btn-primary" type="button">Save changes</button>

      </div>

    </div>

  </div>

</div>

CSS:- 

Css Used in bootstrap on line CDN  file:-

 

JS:-

<script type="text/javascript">

     $(document).ready(function(){

       //  $('#myModal').show();

     //console.log($.cookie('popup'));

     

      if($.cookie("popup") === "1"){

        

        $('#myModal').hide();

        

       }else{

              setTimeout(function(){$('#myModal').show()}, 2000)

                 $(".close").click(function(event){ //Event is mention same as bottom line

                       event.preventDefault();   // Event name is mention uper line same as bottom line, ::preventDefault is disable the link use this function

                       $.cookie('popup', '1');   //  Value is 1 is the find get the number

                       $('#myModal').hide();     

                         

                 });

           

           

       };

     

 });

 </script>