Evitare la chiusura del modal in Bootstrap 4

Uso molto spesso il componente modal di Bootstrap, soprattutto per visualizzare loading-dialog nel caso di operazioni AJAX.

Ad esempio:

function myFunc() {
    $.ajax({
        // OPZIONI
        beforeSend: function (xhr) {
            $('#modal_wait').modal('show');
        }
    }).done(function (res) {
        $('#modal_wait').modal('hide');
    }).fail(function (err) {
        $('#modal_wait').modal('hide');
        alert("ERRORE: " + err);
    });
}

Però, se in fase di esecuzione operazione cliccate sulla finestra, questa si chiuderà.

E questo comportamento non mi piace, perechè potrebbe essere che l'esecuzione asincrona richieda un pò di tempo.

E' possibile evitare questo comportamento usando l'attributo data-backdrop!

In sostanza il modal da così:

<div class="modal modal-vertical-centered" id="modal_wait" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <i class="fa fa-spinner fa-5x fa-spin"></i>
            </div>
        </div>
    </div>
</div>

Diventerà così:

<div class="modal modal-vertical-centered" id="modal_wait" role="dialog" 
data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <i class="fa fa-spinner fa-5x fa-spin"></i>
            </div>
        </div>
    </div>
</div>

Come al solito, pro e contro; fate qualche test per verificare cosa sia meglio per voi!

Enjoy!