in English

Modale

Aduprate u plugin modale JavaScript di Bootstrap per aghjunghje dialoghi à u vostru situ per lightboxes, notificazioni d'utilizatori, o cuntenutu cumplettamente persunalizatu.

Cumu funziona

Prima di principià cù u cumpunente modale di Bootstrap, assicuratevi di leghje e seguenti cum'è e nostre opzioni di menu sò cambiate recentemente.

I modali sò custruiti cù HTML, CSS è JavaScript. Sò posizionati annantu à tuttu u restu in u documentu è sguassate u scroll da a <body>manera chì u cuntenutu modale scorri invece.
Cliccà nant'à u modale "sfondu" chjuderà automaticamente u modale.
Bootstrap supporta solu una finestra modale à u mumentu. I modali nidificati ùn sò micca supportati perchè credemu chì sò sperienze d'utilizatori poveri.
I modali usanu position: fixed, chì pò esse qualchì volta un pocu particulari nantu à u so rendering. Sempre chì hè pussibule, mette u vostru HTML modale in una pusizione di primu livellu per evità l'interferenza potenziale da altri elementi. Probabilmente averete prublemi quandu nidificate .modalin un altru elementu fissu.
Una volta di più, per via di position: fixed, ci sò qualchi caveats cù l'usu di modali nantu à i dispositi mobili. Vede i nostri documenti di supportu di navigatore per i dettagli.
A causa di a manera chì HTML5 definisce a so semantica, l' autofocusattributu HTML ùn hà micca effettu in i modali Bootstrap. Per ottene u listessu effettu, utilizate qualchì JavaScript persunalizatu:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia query. Vede a sezione di movimentu ridottu di a nostra documentazione d'accessibilità .

Continua a leghje per demo è guida d'usu.

Esempii

Quì sottu hè un esempiu modale staticuposition (chì significa u so è displaysò stati rimpiazzati). Includite sò l'intestazione modale, u corpu modale (necessariu per padding), è u piè di pagina modale (opcional). Vi dumandemu di include intestazioni modali cù l'azzioni di licenzià ogni volta chì hè pussibule, o furnisce un'altra azione esplicita di licenziamentu.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Demo live

Cambia una demo modale di travagliu clicchendu u buttone sottu. Si scenderà è fade in da a cima di a pagina.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Fondu staticu

Quandu u sfondate hè stallatu in static, u modale ùn si chjude micca quandu clicchendu fora. Cliccate u buttone sottu per pruvà.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Scrolling long content

Quandu i modali diventanu troppu longu per a vista o u dispositivu di l'utilizatori, scorri indipindente da a pagina stessa. Pruvate a demo quì sottu per vede ciò chì significhemu.