Question

What I am trying to do is when the user clicks a checkbox, it opens the modal window with a form and that form submits the information to a database, and displays a thank you in the modal window.

I’m using the following modal window:
http://designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/

1. How can I initiate the modal window from checking a checkbox rather than clicking a link?

Any advice would be greatly appreciated.

Thank you!

Update:

<input type="checkbox" id="check_open" />Open</div>

<!-- hidden inline form -->
<div id="inline">
<h2>Send us a Message</h2>
<form id="contact" action="#" method="post" name="contact"><label for="email">Your E-mail</label>
    <input id="email" class="txt" type="email" name="email" />

    <label for="msg">Enter a Message</label>
    <textarea id="msg" class="txtarea" name="msg"></textarea>

    <button id="send">Send E-mail</button></form></div>

<!-- basic fancybox setup -->
<script type="text/javascript">
    function validateEmail(email) { 
        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
    }

    $(document).ready(function() {
        $("#check_open").fancybox();
        $("#contact").submit(function() { return false; });


        $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var msgval    = $("#msg").val();
            var msglen    = msgval.length;
            var mailvalid = validateEmail(emailval);

            if(mailvalid == false) {
                $("#email").addClass("error");
            }
            else if(mailvalid == true){
                $("#email").removeClass("error");
            }

            if(msglen < 4) {
                $("#msg").addClass("error");
            }
            else if(msglen >= 4){
                $("#msg").removeClass("error");
            }

            if(mailvalid == true && msglen >= 4) {
                // if both validate we attempt to send the e-mail
                // first we hide the submit btn so the user doesnt click twice
                $("#send").replaceWith("<em>sending...</em>");

                $.ajax({
                    type: 'POST',
                    url: 'sendmessage.php',
                    data: $("#contact").serialize(),
                    success: function(data) {
                        if(data == "true") {
                            $("#contact").fadeOut("fast", function(){
                                $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                                setTimeout("$.fancybox.close()", 1000);
                            });
                        }
                    }
                });
            }
        });
    });
</script>

Answer 1

The example connects the .fancybox() method to anything assigned the modalbox class:

$(".modalbox").fancybox();

if you want the modal dialog to launch when you click your checkbox, either assign it the modalbox class, or assign it by id, something like:

<input type="checkbox" id="check_open" />Open

and

$("#check_open").fancybox();

in your document.ready function.

There are plenty of examples around for storing data submitted to a php script to a database. Maybe start here…