Unito.it

Tema Unito v3

Fineste Modali

Un plugin Javascript per aprire in pop-up e mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

Tieni presente che:

  • Le modali sono costruite in HTML, CSS, e JavaScript. Sono posizionate al di sopra di ogni altro elemento della pagina e rimuovono lo scroll dal <body> in modo che il contenuto della modale invece scorra.
  • Cliccando sulla parte che oscura la pagina (il cosiddetto backdrop della modale), questa verrà chiusa automativamente.
  • A causa di come HTML5 definisce la sua semantica, l’attributo HTML autofocus non ha effetto sulle modali di Bootstrap. Per ottenere lo stesso effetto, usa un codice JavaScript personalizzato, ad esempio

    var myModal = document.getElementById('myModal');
    var myInput = document.getElementById('myInput');

    myModal.addEventListener('shown.bs.modal', function () {
    myInput.focus();
    })

Per generare una modale senza Javascript, imposta data-bs-toggle="modal" su un elemento di controllo, come un pulsante, insieme a data-bs-target="#foo" o href="#foo" per attivare/disattivare una specifica modale. Il bottone "chiudi" referenzia l'elemento da chiudere attraveso l'attributo data-bs-dismiss.

Esempio

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Lancia la demo della modale</button>
<div class="modal fade" tabindex="-1" role="dialog" id="exampleModal" aria-labelledby="exampleModalTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title h5 " id="exampleModalTitle">Intestazione modale</h2>
      </div>
      <div class="modal-body">
        <p>Font Titillium 16px. Leading 24px. omnis iste natus error.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary btn-sm" data-bs-dismiss="modal" type="button">Chiudi modale</button>
      </div>
    </div>
  </div>
</div>

Allilneamento

Per aprire la modale da sinistra a destra aggiungere le seguenti classi: Aggiungi .it-dialog-scrollable a .modal occupare tutta l’altezza disponibile. Aggiungi .modal-dialog-left a .modal-dialog per allineare a sinistra la modale.

Per aprire la modale da destra a sinistra aggiungere le seguenti classi: Aggiungi .it-dialog-scrollable a .modal occupare tutta l’altezza disponibile. Aggiungi .modal-dialog-right a .modal-dialog per allineare a sinistra la modale.

Aggiungi .modal-dialog-centered a .modal-dialog per centrare verticalmente la modale.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalSX">Finestra Modale a sinistra</button> 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDX">Finestra Modale a destra</button> 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalC">Finestra Modale centrata verticalmente</button>
<div class="modal  it-dialog-scrollable fade" tabindex="-1" role="dialog" id="exampleModalSX" aria-labelledby="exampleModalTitle">
  <div class="modal-dialog modal-dialog-left" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalTitle">Lorem Ipsum</h5>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary btn-sm" data-bs-dismiss="modal" type="button">Chiudi</button>
      </div>
    </div>
  </div>
</div>
<div class="modal  it-dialog-scrollable fade" tabindex="-1" role="dialog" id="exampleModalDX" aria-labelledby="exampleModalTitle">
  <div class="modal-dialog modal-dialog-right" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalTitle">Lorem Ipsum</h5>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary btn-sm" data-bs-dismiss="modal" type="button">Chiudi</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="exampleModalC" aria-labelledby="exampleModalTitle">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalTitle">Lorem Ipsum</h5>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary btn-sm" data-bs-dismiss="modal" type="button">Chiudi</button>
      </div>
    </div>
  </div>
</div>

E' possibile utilizzare Javascript per ottenere un controllo più accurato delle finstre modali e degli eventi che generano.

Accessibilità

Aggiungi sempre:

  • l’attributo role="dialog" all’elemento con classe .modal (maggiori info su MDN)
  • l’attributo aria-labelledby="..." all’elemento con classe .modal, con riferimento al titolo della modale stesso (maggiori info su MDN)
  • l’attributo role="document" applicato al .modal-dialog stesso

Inoltre, puoi aggiungere una descrizione della tua finestra di dialogo modale con aria-describedby su .modal.

Nel caso non fosse presente un titolo al quale legare l’attributo aria-labelledby="..." puoi etichettare la modale direttamente utilizzando l’attributo aria-label="Titolo modale"

Torna su