Bootstrap完成功能后，如何在jQuery中运行功能？

Question

I am working on a final project due in less than 24 hours and am working on the final requirement, which is to add custom Javascript to my code that is not complete bootstrap.

I have a bootstrap created form with a submit button. I used jQuery to trigger a bootstrap modal to appear displaying a success message upon the clicking of that button. The modal closes when the user clicks the "x" or clicks outside the modal window.

Once the modal window closes, I am attempting to hide the form from the page using jquery. Here is my code snippet below:

//the modal submit button click event
$('#myModal').modal(show);   

//the form dissapears after the modal is closed. #formToggle is the id applid to the <form> 

$(document).ready( function() {
    $('#formToggle').on('show', function(){
        $('#formToggle').remove();
    });
});

Answer 1

use hidden.bs.modal :

$('#myModal').on('hidden.bs.modal', function(){
    // do your stuff here...
});

hidden.bs.modal occurs when the modal is fully hidden (after CSS transitions have completed)

Answer 2

Listen when the modal is closed

$(document).on('hidden.bs.modal', '#myModal', function () {
 $("#formToggle").hide();
});

https://jsfiddle.net/yd9nffxe/6/