Doc: https://getbootstrap.com/docs/4.4/components/modal/

<!-- BACKDROP - Recouvre tout le document -->
<div class="modal" id="myModal" tabindex="-1" role="dialog">
 
    <!-- CADRE - Positionne le dialogue au centre du document -->
    <div class="modal-dialog modal-dialog-centered" role="document">
 
        <!-- CONTENU - Encadre le contenu du dialogue -->
        <div class="modal-content">
 
            <div class="modal-header">
                <p>Modal header</p>
            </div>
 
            <div class="modal-body">
                <p>Modal body</p>
            </div>
 
            <div class="modal-footer">
                <p>Modal footer</p>
            </div>
 
        </div>
 
    </div>
 
</div>

Bouton “X” dans le Header :

<div class="modal-header">
    <h5 class="modal-title">Titre du dialogue</h5>
 
    <button
        type="button"
        class="close"
        data-dismiss="modal"
        aria-label="Close">
 
        <span aria-hidden="true">&times;</span>
 
    </button>
</div>

Bouton “Fermer” dans le Footer :

<div class="modal-footer">
 
    <button
        type="button"
        class="btn btn-secondary"
        data-dismiss="modal">
 
        Close
 
    </button>
</div>

<button
    type="button"
    class="btn btn-primary"
    data-toggle="modal"
    data-target="#myModal">
 
    Toggle Modal
 
</button>

Afficher :

$('#myModal').modal('show')

Cacher :

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