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
• On checking the checkbox, hit submit and close the modal box, proceed to homepage
• Remember this checkbox tick preference using a cookie
• On a users return to the homepage, if they have checked the checkbox, the modal box won't display

I've been getting somewhere with this:

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

In that I can get the modal box displaying on page load, but I can't work out how to get the form to make the checkbox mandatory and close the box. I also don't know where to start when setting a cookie.

Any pointers would be much appreciated.

Thanks

EDIT: to include code:

Index.html - to display modal box on page load

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

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

});

2.html - modal box content loaded 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

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>

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

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