Jump to content

Modal Popup


lional

Recommended Posts

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.