====== Modal ======

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

===== Définition du dialogue modal =====

<code html>
<!-- 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>
</code>

Bouton "X" dans le Header :

<code html>
<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>
</code>

Bouton "Fermer" dans le Footer :

<code html>
<div class="modal-footer">

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

===== Activation via un bouton =====

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

===== Activation via Javascript =====

Afficher :

<code javascript>
$('#myModal').modal('show')
</code>

Cacher :

<code javascript>
$('#myModal').modal('hide')
</code>