2013-05-28 5 views
3

J'essaie de faire apparaître le modal seulement une fois par semaine. J'utilise Wordpress, et le thème Roots, et ai les scripts mis en file d'attente et enregistrés correctement.Twitter Bootstrap Modal et Jquery Cookie Plugin

Mon code pour le modal est

<div class="modal hide fade modalborder" id="myModal"> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">×</a> 
     <div class="modal-body"> 
      <h2 class="modalheader">Header Here</h2> 
      <p class="modalcoffee">Text here</p> 
      <p class="modalcomesin">Text here</p> 
     </div> 
     <p class="modallearn">Text Here</p> 
     <p class="modalready">Are you ready to <span class="modalstart">start</span>?</p> 
     <a href="#" class="btn btn-info">Click Here</a> 
    </div> 
</div> 

Le javascript actuelle pour ce spectacle fonctionne parfaitement:

<script type="text/javascript"> 
$(window).load(function(){ 
    $('#myModal').modal('show'); 
}); 
</script> 

Je sais très peu de choses sur jQuery et javascript pour cette question. Que devrais-je faire pour que cela fonctionne avec les cookies?

+1

Où se trouve votre champ de case à cocher? Aussi, je pense que vous devriez déclencher l'événement de changement pour votre case à cocher. – vitozev

Répondre

4

Vous devez d'abord comprendre les JQuery cookie plugin comme ceci:

<script src="/path/to/jquery.cookie.js"></script> 

ensuite le code suivant devrait vous aider:

<script type="text/javascript"> 
$(function(){ 
    // If the cookie does not exist 
    if ($.cookie('modalshow') === null) 
    { 
     // Show the modal 
     $('#myModal').modal('show'); 
     var expiryDate = new Date(); 
     var hours = 168; 
     expiryDate.setTime(expiryDate.getTime() + (hours * 3600 * 1000)); 

     // Create cookie to expire in 168 hours (1 week) 
     $.cookie("modalshow", "false", { path: '/', expires: expiryDate }); 
    } 
}); 
</script> 
0

même que @mccanff réponse, mais sans utiliser libs externes

if (document.cookie.indexOf("modalshow=true") < 0) { 
    $('#myModal').modal('show'); 
    var expiryDate = new Date(); 
    var hours = 168; 
    expiryDate.setTime(expiryDate.getTime() + (hours * 3600 * 1000)); 
    document.cookie = "modalshow=true; expires=" + expiryDate + "; path=/"; 
} 
Questions connexes