Bootstrap Modal Freezes Page After Closing

Question

Not sure why, but my Bootstrap Modal is freezing my screen after I hit the Close button. Bootstrap version is 3.3.6

Modal code:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" !important>
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Message</h4>
            </div>
            <div class="modal-body">
                <textarea class="form-control" rows="10" ng-model="msg.message" required autofocus style="max-width: 100%;">{{msg.message}}</textarea>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" ng-click="controller.edit(msg)">Edit And Close</button>
            </div>
        </div>

    </div>
</div>

Button click calling modal:

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-pencil"></span></button>

Method being called on close:

public edit(message) {
    console.log(message);
    this.$http.put(`api/causemessage`, message).then((res) => {
        this.$state.reload();
    });
}

If anyone can help diagnose this problem, it would be much appreciated!

Answer 1

Try using the following script in method you call on close..

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