Bootstrap 4 Modal Hide Not Working

Question

In Bootstrap v3.3.7 the below code works fine. I have recently attempted to upgrade to Bootstrap v4.0.0-beta.2 for some reason it no longer works.

What I am doing is showing a modal div that has as a spinner on it. I then go and load the rest of page and when all done loading the rest of the page I close the modal div. Again worked fine in v3, no longer works in v4. I can however open the console and run $("#divLoading").modal('hide'); and the div goes away.

FIDDLE Boostsrap v4 [BROKE]: https://jsfiddle.net/gc1097oh/
FIDDLE Bootstrap v3 [WORKS]: https://jsfiddle.net/7skoLo2q/

 <div id="divMain" class="Main">
                <div id="divLoading" class="modal fade">
                    <div class="loader">
                        <br />
                        <br />
                        loading div actual div has a spinner but not need to show error
                    </div>
                    <div class="modal-dialog invisible">

                    </div>
                </div>
             </div>

Javascript:

<script type="text/javascript">
    $(function () {
        showLoading();
        //do some work then hide
        hideLoading();
    });


    function showLoading() {
        $('#divLoading').modal({
            backdrop: 'static',
            keyboard: false
        });
    }

    function hideLoading() {
        $("#divLoading").modal('hide');
    }
</script>

Answer 1

Modals are created in an asynchronous manner, but you are calling your showLoading() and hideLoading() functions in a synchronous way. You can check if the modal has been displayed already in your hideLoading function like so:

function hideLoading() {
    $('#divLoading').on('shown.bs.modal', function (e) {
        $("#divLoading").modal('hide');
    })
}