Question

Using colorbox.js, I am opening a form in a lightbox when the user clicks on the corresponding link. Right now, when the user visits the page the form is hidden but when the they click on the link the form is viewable in the lightbox. When the close the lightbox out, the form is then visible on the actual page. I would like for the form to be hidden on the page when the user exits the lightbox. Here is my script so far http://jsfiddle.net/j9ths/ :

jQuery(document).ready(function() {
        $("#myForm").hide();

        $("#link_to_form").click(function() {
            $("#myForm").show();
        });

        $("#link_to_form").colorbox({ width: "50%", inline: true, href: "#myForm" });

        $("#cboxClose").click(function() {
            $("#myForm").hide();
        });
 }); 

The div id of #cboxClose is the “x” button on the lightbox.

Answer 1

You can write onClose callback as you can see here.

    $("#link_to_form").colorbox({
        width: "50%",
        inline: true,
        href: "#myForm",
        onclose: function() {
             $("#myForm").hide();
        }
    });

$("#cboxClose").on('click', function() {
    $("#link_to_form").colorbox.close();
});