Conflict between Featherlight.js and Contact Form 7? - contact-form-7

Question

I'm trying to get a Contact Form 7 form to work in a Featherlight.js lightbox. I've created a page at mydomain.com/contact and set the link to open mydomain.com/contact #main article.
Featherlight does open the form, but when I submit the form, the lightbox closes and the url resolves to mydomain.com/contact/#wpcf7-f262-p11-o1. It doesn't matter if it's successfully submitted or there are validation errors, the lightbox still closes (to be clear, the form does actually work—I receive the email).
If I open the entire page (mydomain.com/contact/), the lightbox doesn't close on submission, which leads me to believe that perhaps there's an AJAX conflict.
That said, I don't receive any errors in the console.
Any help in resolving the issue would be appreciated!
Thanks.

Answer 1

I've got it working, thanks to the second part of the accepted answer here (the Documentation example from the jQuery website).
jQuery's submit() function didn't work for me—I'm guessing it's a version issue? In any case, this is my final code:
/* attach a submit handler to the form */
$( "body" ).on( "submit", ".wpcf7-form", function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
url = $form.attr( 'action' );
/* Send the data using post */
var posting = $.post( url, $form.serialize() );
/* Put the results in a div */
posting.done(function(data) {
var content = $(data).find('.wpcf7-form');
$('.featherlight .wpcf7').empty().append(content);
});
});