Caja modal + casilla de verificación + cookie

Question

Me gustaría lograr lo siguiente:

• En la carga de la página de inicio, mostrar el cuadro modal
• En el cuadro modal, muestre un formulario con una única casilla de verificación obligatoria
• Al marcar la casilla de verificación, haga clic en enviar y cerrar el cuadro modal, proceda a la página principal
• Recuerde esta preferencia de marca de casilla de verificación utilizando una cookie
• En un usuario, vuelva a la página de inicio, si ha marcado la casilla de verificación, el cuadro modal no se mostrará

He estado llegando a algún lado con esto:

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

En eso puedo obtener el cuadro modal que se muestra en la carga de la página, pero no puedo averiguar cómo obtener el formulario para hacer que la casilla de verificación sea obligatoria y cerrar el cuadro. Tampoco sé por dónde empezar al configurar una cookie.

Cualquier puntero sería muy apreciado.

Gracias

EDITAR: para incluir el código:

Index.html: para mostrar el cuadro modal en la carga de la página

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

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

});

2.html: contenido de la caja modal cargado mediante 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

Cargue el complemento jquery cookie para permitir configurar / leer cookies: http: //plugins.jquery. com / project / cookie entonces .. algo como esto a continuación. Sin probar, pero se te ocurre la idea

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

Usé un complemento de JQuery no hace mucho tiempo llamado SimpleModal

Me impresionó mucho lo fácil que fue. En el modal tenía múltiples casillas de verificación y para llevar los valores de las casillas de vuelta a la página en la que se encontraba el modal después de que se presionó un botón de envío.

Toda la información y las demostraciones se encuentran en página de inicio de SimpleModal

Answer 3

¡Por fin funciona! Me faltaba la devolución de llamada cuando existe la cookie y estos tics '' en torno al valor de la cookie. Así es como se ve. Por favor, avíseme si hay algún error obvio. (muchas gracias por su apoyo)

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