Modal box + checkbox + cookie

Question

I would like to achieve the following:

• On homepage load, display modal box
• Within modal box, display a form with a single mandatory checkbox

Answer 1

It works, finally! I was missing the callback when the cookie exists and these tics '' around the value of the cookie. Here is how it looks like. Please, let me know if there is some obvious mistake. (many thanks for your support)

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

Answer 2

I used a JQuery plugin not long ago called SimpleModal

I was very impressed with how easy it was. On the modal I had multiple checkboxes and to carried the values of the checkboxes back to the page the modal was on after a submit button was hit.

All the info and demos are on the SimpleModal homepage

Answer 3

Load the jquery cookie plugin to allow to set/read cookies: http://plugins.jquery.com/project/cookie then.. something like this below. Untested, but you get the 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>