Hi All

I am trying to create a modal popup but I would like it to do the following

1. Load when the user enters the site, but only once not every time they navigate to a new page.

2. when they leave the site. again only when they leave the site not when they move from page to page.

I am still busy on number 1 so I haven't started working on nr 2. I have got the popup part right but it loads every time the page is refreshed. I have been trying to play with cookies but then it doesn't load at all

1. <script>
   if (once_per_session==0)
   $(document).ready(function()
   {
       if ($.cookie('20080521') != '1') {
       $('#myModal').modal('show');
       $.cookie('20080521', '1', { domain: '', path: '' }); }
   });
   </script>

2. 
   

   <div class="modal fade" id="myModal" 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">Modal Header</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>

3. 
   

   <style>
   .modal{
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   z-index:1050;
   display:none;
   overflow:hidden;
   -webkit-overflow-scrolling:touch;
   outline:0
   }
   .modal.fade .modal-dialog{
   -webkit-transition:-webkit-transform .3s ease-out;
   -o-transition:-o-transform .3s ease-out;
   transition:transform .3s ease-out;
   -webkit-transform:translate(0,-25%);
   -ms-transform:translate(0,-25%);
   -o-transform:translate(0,-25%);
   transform:translate(0,-25%)
   }
   .modal.in .modal-dialog{
   -webkit-transform:translate(0,0);
   -ms-transform:translate(0,0);
   -o-transform:translate(0,0);
   transform:translate(0,0)
   }
   .modal-open .modal{
   overflow-x:hidden;
   overflow-y:auto
   }
   .modal-dialog{
   position:relative;
   width:auto;
   margin:10px
   }
   .modal-content{
   position:relative;
   background-color:#fff;
   -webkit-background-clip:padding-box;
   background-clip:padding-box;
   border:1px solid #999;
   border:1px solid rgba(0,0,0,.2);
   border-radius:6px;
   outline:0;
   -webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
   box-shadow:0 3px 9px rgba(0,0,0,.5)
   }
   .modal-backdrop{
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   z-index:1040;
   background-color:#000
   }
   .modal-backdrop.fade{
   filter:alpha(opacity=0);
   opacity:0}.modal-backdrop.in{
   filter:alpha(opacity=50);
   opacity:.5
   }
   .modal-header{
   padding:15px;
   border-bottom:1px solid #e5e5e5}
   .modal-header .close{
   margin-top:-2px
   }
   .modal-title{
   margin:0;
   line-height:1.42857143
   }
   .modal-body{
   position:relative;
   padding:15px
   }
   .modal-footer{
   padding:15px;
   text-align:right;
   border-top:1px solid #e5e5e5
   }
   .modal-footer .btn+.btn{
   margin-bottom:0;
   margin-left:5px
   }
   .modal-footer .btn-group .btn+.btn{
   ;
   top:-9999px;
   width:50px;
   height:50px;
   overflow:scroll}@media (min-width:768px){
   .modal-dialog{
   width:600px;
   margin:
   30px auto
   }
   .modal-content{
   -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
   box-shadow:0 5px 15px rgba(0,0,0,.5)
   }.modal-sm{width:300px}}@media (min-width:992px){
   .modal-lg{
   width:900px
   }
   }
   </style>