case Modal + case + biscuit

Question

je voudrais obtenir les résultats suivants:

• Sur charge page d'accueil, afficher la boîte
• modale Dans la boîte modale, afficher un formulaire avec une seule case obligatoire
• Lors de la vérification la case à cocher, a frappé soumettre et fermer la boîte modale, passez à la page d'accueil
• Rappelez-vous cette préférence à cocher des cases à cocher en utilisant un cookie
• Sur un utilisateur retour à la page d'accueil, si elles ont coché la case, la zone modale n'affichera

je reçois quelque part avec ceci:

http://dev.iceburg.net/jquery/jqModal

Dans ce que je peux obtenir la boîte modale affichant la charge de la page, mais je ne peux pas Étudier comment obtenir le formulaire pour rendre la case obligatoire et fermer la boîte. Je ne sais pas non plus par où commencer lorsque je mets un cookie.

Tous les pointeurs seraient très appréciés.

Merci

EDIT: pour inclure le code:

Index.html - pour afficher la boîte modale à la page charge

$().ready(function() { 
    $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' }); 

    setTimeout($('#ex2').jqmShow(),2000); 

}); 

2.html - contenu de la boîte modale chargée via ajax

function validate(frm) { 
     if (frm.checkbox.checked==false) 
    { 
     alert("Please agree to our Terms and Conditions."); 
     return false; 
    } 
} 


<form action="" method="POST" onSubmit="return validate(form);" name="form"> 
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a> 
<input type="submit" value="Submit"> 
</form> 

Answer 1

charge le plug-in cookie jquery pour permettre de définir/lire les cookies: http://plugins.jquery.com/project/cookie alors .. quelque chose comme ça ci-dessous. Non testé, mais vous avez l'idée

index.html:

$().ready(function() { 
    if (!$.cookie('agreed_to_terms')) 
    { 
     $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' }); 
     $('#ex2').jqmShow();  
    } 
}); 

2.html:

$().ready(function() 
{ 
    $('#agreeFrm').submit(function(e) 
    { 
     e.preventDefault(); 

     if ($(this).find('input[name=checkbox]').is(':checked')) 
     { 
      $.cookie('agreed_to_terms', '1', { path: '/', expires: 999999 }); 
      $('#ex2').jqmHide(); 
     } 
    }); 
}); 

<form id="agreeFrm" action="" method="POST" name="form"> 
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a> 
<input type="submit" value="Submit"> 
</form> 

Answer 2

J'ai utilisé une prise JQuery il ya peu de temps appelé SimpleModal

J'ai été très impressionné par la facilité avec laquelle il était. Sur le modal j'ai eu plusieurs cases à cocher et pour porter les valeurs des cases à cocher à la page le modal était sur après un bouton de soumission a été frappé.

Toutes les informations et les démos sont sur le SimpleModal homepage

Answer 3

Il fonctionne, enfin! Il me manquait le rappel quand le cookie existe et ces tics autour de la valeur du cookie. Voici à quoi ça ressemble. S'il vous plaît, faites-moi savoir s'il y a une erreur évidente. (un grand merci pour votre soutien)

function confirm(msg,callback) { 
    $('#confirm') 
    .jqmShow() 
    .find('p.jqmConfirmMsg') 
     .html(msg) 
    .end() 
    .find(':submit:visible') 
     .click(function(){ 
     if(this.value == 'Proceed'){ 
      $.cookie("agreed_to_terms", '1', { expires : 1, path: '/' }); //set cookie, expires in 365 days 
      (typeof callback == 'string') ? 
      window.location.href = callback : 
      callback(); 
     } 
     $('#confirm').jqmHide(); 
     }); 
} 


$().ready(function() { 
    $('#confirm').jqm({overlay: 88, modal: 'true', trigger: false}); 

    // trigger a confirm whenever links of class alert are pressed. 
    $('a.confirm').click(function() { 
    if ($.cookie('agreed_to_terms') == '1'){window.location.href = callback = 
      callback() 
     //they already have cookie set 
    }else{ 
     confirm('About to visit: '+this.href+' !',this.href); 
    } 
    return false; 
    }); 
});// JavaScript Document