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

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 2

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>