Submitting form data from modal, modal won't close

Question

I'm creating a type of content management system that allows users to create pages based on templates.

I have a page that has 2 placeholder divs. Below is an example of one. When you click on the div, a modal pops up that allows the user to use TinyMCE to create content. The idea is to set the content, hit the "Get Data" button and have the modal disappear with the content from the editor now displaying inside the original div.

This is working as far as p utting the content in the div when I hit submit. The body of the modal disappears at this point, but the gray opacity screen that usually sits under the bootstrap modal is still present and I can't any longer do anything on the page. I'm wondering what I'm doing wrong here and how I can fix it to fully close the modal when I hit the submit button.

    <div class="leftContent">
        <div class="modal fade bd-example-modal-lg" id="leftFiftyModal" tabindex="-1" role="dialog" aria-labelledby="leftFiftyLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="leftFiftyModal">Content Library:</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <h3>Create your own content</h3>
                    <form id="form-data" method="post">
                      <textarea id="mytextarea"></textarea>
                      <input type="submit" value="Get Data">
                    </form>
                </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
               </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){

        $("#form-data").submit(function(e){

            var content = tinymce.get("mytextarea").getContent();

            $(".leftContent").html(content);

            return false;

        });

        jQuery.noConflict();
        $('#leftFiftyModal').modal('hide');

    });
    </script>

Answer 1

Try:

<script type="text/javascript">
    $(document).ready(function(){

    $("#form-data").submit(function(e){

        var content = tinymce.get("mytextarea").getContent();

        $(".leftContent").html(content);

        jQuery.noConflict();

        $('#leftFiftyModal').modal('hide');

        return false;

    });

});
</script>