Boîte modale + case à cocher + cookie

Question

J'aimerais atteindre les objectifs suivants:

• Au chargement de la page d'accueil, affichez la boîte modale
• Dans la boîte modale, affichez un formulaire avec une seule case à cocher obligatoire
• Lorsque vous cochez la case, cliquez sur Soumettre, puis fermez la boîte de dialogue modale. Passez à la page d'accueil
• N'oubliez pas cette préférence de case à cocher en utilisant un cookie
• Sur un utilisateur, revenez à la page d'accueil, s'il a coché la case, la boîte modale ne s'affichera pas

Je vais quelque part avec ceci:

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

En ce sens, je peux obtenir la boîte modale qui s'affiche au chargement de la page, mais je ne peux pas trouver comment obtenir le formulaire pour rendre la case à cocher obligatoire et la fermer. De plus, je ne sais pas par où commencer lors de l’installation d’un cookie.

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

Merci

EDIT: pour inclure le code:

Index.html - Pour afficher la boîte modale lors du chargement de la page

$().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é 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

Chargez le plug-in jquery cookie pour permettre de définir / lire des cookies: http: //plugins.jquery. com / projet / cookie alors .. quelque chose comme ceci 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é un plugin JQuery appelé SimpleModal il n'y a pas si longtemps

J'ai été très impressionné par la simplicité de la procédure. Sur le modal, j'avais plusieurs cases à cocher et je reportais les valeurs des cases à la page sur laquelle se trouvait le modal après la pression du bouton d'envoi.

Toutes les informations et les démonstrations se trouvent sur la page d'accueil SimpleModal

.

Answer 3

Cela fonctionne, enfin! Je manquais le rappel lorsque le cookie existait et que ces tics «contenaient la valeur du cookie». Voici à quoi ça ressemble. S'il vous plaît, laissez-moi savoir s'il y a une erreur évidente. (merci beaucoup 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