Modal Popup

[lional]

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

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

<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">×</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>

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

Thank you in advance