Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Finestre modali

Finestre modali

Usa il plugin JavaScript di Bootstrap per aprire finestre modali per mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

Accessibilità

Assicurati di aggiungere 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". Vedi esempio Modale semplice - Basico

Approfondisci l’argomento sul sito delle WAI-ARIA Authoring Practices.

Prima di utilizzare il componente modale di Bootstrap, assicurati di leggere quanto segue:

  • 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 automaticamente.
  • 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:
1
2
3
4
5
6

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

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

Esempi

In questa sezione gli esempi sono rappresentati da modali statiche, dove position e display sono stati sovrascritti mediante l’inclusione in un container .it-example-modal.

Componenti della modale

Sono inclusi l’intestazione, il corpo, e il footer della modale. È richiesta l’inclusione di intestazioni o elementi con funzione di chiusura della modale stessa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="it-example-modal">
   <div class="modal" tabindex="-1" role="dialog" id="modal1" aria-labelledby="modal1Title" aria-describedby="modal1Description">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h2 class="modal-title " id="modal1Title">Titolo modale</h2>
            </div>
            <div class="modal-body">
               <p id="modal1Description">Testo che descrive lo scopo della modale e quali sono le azioni richieste all'utente</p>
               <p>Può essere presente anche un <a href="#">link</a> di approfondimento.</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">Azione 2</button>
               <button class="btn btn-primary btn-sm" type="button">Azione 1</button>
            </div>
         </div>
      </div>
   </div>
</div>

Modale con pulsante di chiusura

Per chiudere la modale, si può utilizzare un pulsante con classe .btn-close.

Accessibilità pulsante di chiusura

Assicurati di inserire del testo per gli screen readers, utilizzando l’attributo aria-label.

1
2
3

<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
  <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
</button>

Esempio completo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="it-example-modal">
   <div class="modal" tabindex="-1" role="dialog" id="modal2" aria-labelledby="modal2Title">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h2 class="modal-title " id="modal2Title">Questo è un messaggio di notifica</h2>
               <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
                  <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
               </button>
            </div>
            <div class="modal-body">
               <p>In questo caso vengono forniti un pulsante di conferma e uno di chiusura della modale.</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-primary btn-sm" type="button">Conferma</button>
            </div>
         </div>
      </div>
   </div>
</div>

Modale con icona

È possibile inserire un icona di alert (o altro tipo) affiancandola all’intestazione. Per formattare correttamente i contenuti della modale con icona, occorre aggiungere la classe alert-modal all’elemento <div class="modal">

Accessibilità icona

Fornire un testo alternativo per l’icona che veicola informazioni: È fondamentale comunicare il significato dell’icona agli utenti che utilizzano tecnologie assistive. Sono disponibili diverse tecniche:

  • Tecnica consigliata (supporto più ampio): Applicare l’attributo role="img" all’elemento <svg>, inserire un elemento <title> all’interno del tag <svg> con il testo descrittivo e collegare i due elementi tramite aria-labelledby.
  • Alternativa: Utilizzare l’attributo aria-label direttamente sull’elemento <svg>
  • Approccio alternativo: Nascondere l’icona con aria-hidden="true" aggiunto all’elemento <svg> se il significato è già comunicato tramite altro testo.

Per maggiori informazioni, consulta il seguente articolo Using ARIA to enhance SVG accessibility.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="it-example-modal">
  <div class="modal alert-modal" tabindex="-1" role="dialog" id="modal3" aria-labelledby="modal3Title">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <svg class="icon" aria-labelledby="titolo-svg" role="img"><title id="titolo-svg">Testo alternativo per la svg</title><use href="/dist/svg/sprites.svg#it-info-circle"></use></svg>
          <h2 class="modal-title " id="modal3Title">Questo è un messaggio di notifica più esteso del solito</h2>
        </div>
        <div class="modal-body">
          <p>In questo caso viene fornito solo un pulsante di conferma della modale.</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary btn-sm" type="button">Conferma</button>
        </div>
      </div>
    </div>
  </div>
</div>

Modale con elementi form

All’interno della modale è possibile inserire elementi form. Di seguito una modale con un elenco di radio button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div class="it-example-modal">
   <div class="modal" tabindex="-1" role="dialog" id="modal4" aria-labelledby="modal4Title">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h2 class="modal-title " id="modal4Title">Scegli una opzione</h2>
               <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
                  <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
               </button>
            </div>
            <div class="modal-body">
               <div class="form-check">
                  <input name="gruppo1" type="radio" id="radio1">
                  <label for="radio1">Opzione 1</label>
               </div>
               <div class="form-check">
                  <input name="gruppo1" type="radio" id="radio2">
                  <label for="radio2">Opzione 2</label>
               </div>
               <div class="form-check">
                  <input name="gruppo1" type="radio" id="radio3">
                  <label for="radio3">Opzione 3</label>
               </div>
            </div>
            <div class="modal-footer">
               <button class="btn btn-primary btn-sm" type="button">Invia</button>
            </div>
         </div>
      </div>
   </div>
</div>

All’interno della modale è possibile inserire delle Liste di link. Per formattare correttamente il contenuto di questa modale, aggiungere la classe it-dialog-link-list all’elemento <div class="modal">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<div class="it-example-modal">
   <div class="modal it-dialog-link-list" tabindex="-1" role="dialog" id="modal5" aria-labelledby="modal5Title">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h2 class="modal-title " id="modal5Title"><span>1.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</h2>
            </div>
            <div class="modal-body">
               <div class="link-list-wrapper">
                  <ul class="link-list">
                     <li>
                        <a class="list-item icon-left" href="#">
                           <svg class="icon icon-primary">
                              <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
                           </svg>
                           <span>Link lista 1</span>
                        </a>
                     </li>
                     <li>
                        <a class="list-item icon-left" href="#">
                           <svg class="icon icon-primary">
                              <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
                           </svg>
                           <span>Link lista 2</span>
                        </a>
                     </li>
                     <li>
                        <a class="list-item icon-left" href="#">
                           <svg class="icon icon-primary">
                              <use href="/dist/svg/sprites.svg#it-chevron-right"></use>
                           </svg>
                           <span>Link lista 3</span>
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Modale popconfirm

La modale di tipo popconfirm può essere utilizzata per brevi messaggi di conferma. Questo particolare design si ottiene applicando la classe popconfirm-modal all’elemento <div class="modal">.

Il titolo della modale è facoltativo, nel caso non fosse necessario è sufficiente rimuovere l’intero elemento <div class="modal-header">.

Basico

Con Header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<div class="it-example-modal">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6">
        <p><strong>Basico</strong></p>
        <div class="modal popconfirm-modal" tabindex="-1" role="dialog"  id="modal6" aria-label="Modale popconfirm">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-body">
                    <p>Breve messaggio di conferma inserito nella modale</p>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-primary btn-xs" type="button">Azione 1</button>
                    <button class="btn btn-outline-secondary btn-xs" type="button" data-bs-dismiss="modal">Azione 2</button>
                  </div>
              </div>
            </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <p><strong>Con Header</strong></p>
        <div class="modal popconfirm-modal" tabindex="-1" role="dialog" id="modal7" aria-labelledby="modal7Title">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="modal7Title">Titolo modale</h5>
                  </div>
                  <div class="modal-body">
                    <p>Breve messaggio di conferma inserito nella modale</p>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-primary btn-sm" type="button">Azione 1</button>
                    <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-dismiss="modal">Azione 2</button>
                  </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

Demo

Modale semplice

Attiva o disattiva la demo di una modale facendo clic sul pulsante qui sotto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Lancia la demo della modale</button>

<!-- Modal -->
<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 " id="exampleModalTitle">Titolo 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>

Scroll di contenuti lunghi

Quando le modali diventano troppo lunghe per il viewport o il dispositivo dell’utente, scorrono indipendentemente dalla pagina stessa.

Per meglio distinguere l’elemento footer con un’ombra è sufficiente aggiungere la classe .modal-footer-shadow a <div class="modal-footer">.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Lancia la demo della modale</button>

<!-- Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="exampleModalLong" aria-labelledby="exampleModalLongTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="exampleModalLongTitle">Titolo modale</h2>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
          <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        </button>
      </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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="modal-footer modal-footer-shadow">
        <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">Annulla</button>
        <button class="btn btn-primary btn-sm" type="button">Azione 1</button>
      </div>
    </div>
  </div>
</div>

Scroll di contenuti all’interno della modale

Si può scegliere di utilizzare uno scroll interno alla modale, mantenendo sempre visibile l’intestazione ed il footer della modale stessa aggiungendo la classe .it-dialog-scrollable all’elemento <div class="modal">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLongFixed">Lancia la demo della modale</button>

<!-- Modal -->
<div class="modal it-dialog-scrollable fade" tabindex="-1" role="dialog" id="exampleModalLongFixed" aria-labelledby="exampleModalLongFixedTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="exampleModalLongFixedTitle">Titolo modale</h2>
      </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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">Annulla</button>
        <button class="btn btn-primary btn-sm" type="button">Azione 1</button>
      </div>
    </div>
  </div>
</div>

Posizionamento

Centratura verticale

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- Button trigger modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalCenter">Lancia la demo della modale</button>

<!-- Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="modalCenter" aria-labelledby="modalCenterTitle">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="modalCenterTitle">Questo è un messaggio di notifica</h2>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
          <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        </button>
      </div>
      <div class="modal-body">
        <p>In questo caso vengono forniti un pulsante di conferma e uno di chiusura della modale.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary btn-sm" data-bs-dismiss="modal" type="button">Conferma</button>
      </div>
    </div>
  </div>
</div>

Allineamento a sinistra

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!-- Button trigger modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalLeft">Lancia la demo della modale</button>

<!-- Modal -->
<div class="modal it-dialog-scrollable fade" tabindex="-1" role="dialog" id="modalLeft" aria-labelledby="modalLeftTitle">
  <div class="modal-dialog modal-dialog-left" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="modalLeftTitle">Questo è un messaggio di notifica</h2>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
          <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        </button>
      </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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary btn-sm" type="button">Conferma</button>
      </div>
    </div>
  </div>
</div>

Allineamento a destra

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!-- Button trigger modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalright">Lancia la demo della modale</button>

<!-- Modal -->
<div class="modal it-dialog-scrollable fade" tabindex="-1" role="dialog" id="modalright" aria-labelledby="modalrightTitle">
  <div class="modal-dialog modal-dialog-right" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="modalrightTitle">Questo è un messaggio di notifica</h2>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
          <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        </button>
      </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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          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. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum.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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary btn-sm" type="button">Conferma</button>
      </div>
    </div>
  </div>
</div>

Rimuovere l’animazione

Per avere modali che appaiono semplicemente senza dissolvenza, rimuovi la classe .fade dal codice della tua modale.

1

<div class="modal" tabindex="-1" role="dialog" id="..." aria-labelledby="..." aria-hidden="true">...</div>

Dimensioni opzionali

Le modali hanno due dimensioni opzionali, disponibili tramite classi da posizionare su un .modal-dialog. Queste dimensioni entrano in gioco in determinati breakpoint per evitare barre di scorrimento orizzontali su finestre più strette.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Modale piccola</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="mySmallModalLabel">Modale piccola</h2>
       <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
          <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        </button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Modale grande</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="myLargeModalLabel">Modale grande</h2>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
          <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        </button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>

<!-- Extra Large modal -->
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Modale molto grande</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title " id="myExtraLargeModalLabel">Modale molto grande</h2>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi finestra modale">
          <svg class="icon icon-lg"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        </button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>

Implementazione

Il plugin per le modali attiva/disattiva il tuo contenuto nascosto su richiesta, tramite attributi data o tramite JavaScript. Aggiunge anche .modal-open al <body> per sovrascrivere comportamento di scroll predefinito e genera un .modal-backdrop per fornire un’area cliccabile per chiudere le modali mostrate quando si clicca all’esterno di esse.

Tramite data attributes

Attiva una modale senza scrivere codice 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.

1

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Lancia la modale</button>

Attivazione tramite codice

Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica utilizzare l’attributo data-bs-toggle specifico per la sua inizializzazione.

Nel caso in cui si desidera importare e inizializzare autonomamente il componente l’attributo data-bs-toggle specifico non deve essere incluso così da evitare inizializzazioni automatiche che possono portare a comportamenti inaspettati.

Per maggiori informazioni consulta la sezione JavaScript di Bootstrap Italia.

1
2
3

import { Modal } from 'bootstrap-italia';

const myModal = new Modal(document.getElementById('myModal'), options)

Opzioni

Attiva i tuoi contenuti come modali, configurabile con un oggetto (facoltativo).

1
2
3
4
5

import { Modal } from 'bootstrap-italia';

const myModal = new Modal(document.getElementById('myModal'), {
  keyboard: false,
})
Nome Tipo Predefinito Descrizione
backdrop boolean | 'static' true Include un elemento modal-backdrop. In alternativa, specificare "static" per uno sfondo che non chiuda il modal quando cliccato.
focus boolean true Focus sulla modale quando viene inizializzata.
keyboard boolean true Abilita la chisura della modale con il tasto escape.

Metodi

Metodi asincroni e transizioni

Tutti i metodi API sono asincroni e avviano una transizione. Ritornano al chiamante non appena viene avviata la transizione ma prima che termini. Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata.

Per maggiori informazioni consulta la documentazione Javascript di Bootstrap (in inglese).

Metodo Descrizione
getInstance Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: Modal.getInstance(domElement).
getOrCreateInstance Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: Modal.getOrCreateInstance(element).
dispose Rimuove la funzionalità Modal.
show Apre manualmente una modale. Ritorna al chiamante prima che la modale sia stata effettivamente mostrata (cioè prima che si verifichi l'evento "shown.bs.modal").
hide Nasconde manualmente una modale. Ritorna al chiamante prima che la modale sia stata effettivamente nascosta (cioè prima che si verifichi l'evento "hidden.bs.modal").
toggle Attiva/disattiva manualmente una modale. Ritorna al chiamante prima che la modale sia stata effettivamente mostrata o nascosta (cioè prima che si verifichi l'evento "shown.bs.modal" o l'evento "hidden.bs.modal").
handleUpdate Riposiziona manualmente la modale se l'altezza della modale cambia nel momento in cui è aperta (nel caso appaia una barra di scorrimento).

Eventi

La classe della modale di Bootstrap espone alcuni eventi per l’aggancio alla funzionalità modale. Tutti gli eventi vengono attivati dalla modale stessa (cioè <div class="modal">).

1
2
3
4

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})
Tipo di evento Descrizione
show.bs.modal Questo evento si attiva immediatamente quando il metodo di istanza show viene chiamato. Se causato da un click, l'elemento selezionato è disponibile come proprietà relatedTarget dell'evento.
shown.bs.modal Questo evento viene attivato quando la modale è stata resa visibile all'utente (attenderà il completamento delle transizioni CSS). l'elemento selezionato è disponibile come proprietà relatedTarget dell'evento.
hide.bs.modal Questo evento viene generato immediatamente quando il metodo di istanza hide è stato chiamato.
hidden.bs.modal Questo evento viene attivato quando la modale ha finito di essere nascosta all'utente (attenderà il completamento delle transizioni CSS).
hidePrevented.bs.modal Questo evento viene attivato quando la modale viene mostrata, il suo sfondo è static e un click fuori dalla modale o la pressione del tasto esc avvengono e il data-bs-keyboard è settato a false.

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-modal-bg Controls the background for the modal, using color tokens. var(--bsi-color-background-inverse)
--bsi-modal-border-color Controls the border color for the modal. transparent
--bsi-modal-border-radius Controls the border radius for the modal, using radius tokens. var(--bsi-radius-smooth)
--bsi-modal-border-width Controls the border width for the modal. 0
--bsi-modal-box-shadow Controls the box shadow for the modal, using elevation tokens. var(--bsi-elevation-medium)
--bsi-modal-footer-bg Controls the footer background for the modal. transparent
--bsi-modal-footer-border-color Controls the footer border color for the modal. var(--bsi-modal-header-border-color)
--bsi-modal-footer-border-width Controls the footer border width for the modal. var(--bsi-modal-header-border-width)
--bsi-modal-footer-gap Controls the footer gap for the modal, using spacing tokens. var(--bsi-spacing-s)
--bsi-modal-header-border-color Controls the header border color for the modal, using color tokens. var(--bsi-color-border-subtle)
--bsi-modal-header-border-width Controls the header border width for the modal. 0
--bsi-modal-inner-border-radius Controls the inner border radius for the modal, using radius tokens. var(--bsi-radius-smooth)
--bsi-modal-margin Controls the margin for the modal. auto
--bsi-modal-padding Controls the padding for the modal, using spacing tokens. var(--bsi-spacing-m)
--bsi-modal-title-font-size Controls the title font size for the modal, using font tokens. var(--bsi-heading-5-font-size)
--bsi-modal-title-font-weight Controls the title font weight for the modal, using font tokens. var(--bsi-heading-font-weight-weak)
--bsi-modal-title-line-height Controls the title line height for the modal, using font tokens. var(--bsi-heading-line-height)
--bsi-modal-transition Controls the transition for the modal. transform 0.3s ease-in-out
--bsi-modal-width Controls the width for the modal. 500px
--bsi-modal-zindex Controls the z-index for the modal. 1055

Breaking change

  • È stata rimossa la classe .h5 dal titolo della modale <h2>.
  • È stata aggiunga la classe .icon-lg all’icona <svg> del pulsante di chiusura .btn-close.