sumbit形式后，colorbox不会关闭

Question

I have issues with colorbox if I try to submit a form, colorbox remains opened on success. I tried to add colorbox.close(); on success, it worked, but if I try to click the link again to open the form, the form is not displaying - I can see only close button and overlay. I tried to hide form and overlay after success, but then again - the form didn't open on second click.

I tried to tweek js file - to assign the same functionality to submit button as close button has, but this of course didn't work properly. How to make form close on submit - please suggest.

The popup form:

<div class="body" id="inline-popup">
    <form action="index" method="post" id="form">
        <fieldset>
            <label>Name</label>
            <input type="text" id="name" name="name" />
        </fieldset>

        <fieldset>
            <label>URL (optional)</label>
            <input type="text" name="url" id="url" />
        </fieldset>
        <fieldset>
            <input type="submit" value="ok" class="submit" />
        </fieldset>
    </form>
</div>

colorbox call and ajax:

    <script>
        $(".popup").colorbox({inline:true, width:"300px", height:"100%"});

$('.submit').on('click', function(e){

        $.ajax({
            type: "POST",
            url: '/pathname/submitForm',
            data: $("#form").serialize(),
            error: function(xhr, ajaxOptions, thrownError, data) {
                err = Array();
                err[0] = "Oops an error is occured";
                    console.log(err);
            },
            dataType: "json",
            success:  function(data) {
                if(data.success=="yes") {
                    console.log(data.success);

                } else {
                    console.log(data.error);
                }
            }
        });
        e.preventDefault();
    });
    </script>

Answer 1

Try this:

success:  function(data) {
    if(data.success=="yes") {
        $.fn.colorbox.close();
        console.log(data.success);
    }