Source

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 è linee di 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" role="dialog">
  <div class="modal-dialog" role="document">
    <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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

Pudete ancu creà un modal scrollable chì permette di scroll u corpu modale aghjunghjendu .modal-dialog-scrollableà .modal-dialog.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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>

Verticalmente centratu

Aghjunghjite .modal-dialog-centeredà .modal-dialogcentru verticalmente u modale.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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>

Tooltips è popovers

Tooltips è popovers ponu esse posti in modali cum'è necessariu. Quandu i modali sò chjusi, tutti i tooltips è popovers sò ancu automaticamente licenziati.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Utilizà a griglia

Utilizà u sistema di griglia Bootstrap in un modale nidificatu .container-fluidin u .modal-body. Allora, aduprate e classi di sistema di griglia normale cum'è in ogni locu.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Avete una mansa di buttone chì tutti attivanu u listessu modale cù un cuntenutu ligeramente sfarente? Aduprate event.relatedTargetè l' attributi HTMLdata-* (possibilmente via jQuery ) per varià u cuntenutu di u modale secondu u buttone hè clicatu.

Quì sottu hè una demo live seguita da un esempiu HTML è JavaScript. Per più infurmazione, leghjite i documenti di l'avvenimenti modali per i dettagli nantu à relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Cambia l'animazione

A $modal-fade-transformvariabile determina u statu di trasformazione di .modal-dialogprima di l'animazione di fade-in modale, a $modal-show-transformvariabile determina a trasformazione di .modal-dialogà a fine di l'animazione di fade-in modale.

Se vulete per esempiu una animazione zoom-in, pudete stabilisce $modal-fade-transform: scale(.8).

Elimina l'animazione

Per i modali chì simpricimenti appariscenu piuttostu chè svanisce per vede, sguassate a .fadeclassa da u vostru marcatu modale.

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

Alture dinamiche

Se l'altezza di un modale cambia mentre hè apertu, duvete chjamà $('#myModal').modal('handleUpdate')per riajustà a pusizione di u modale in casu chì una barra di scorrimentu appare.

L'accessibilità

Assicuratevi di aghjunghje role="dialog"è aria-labelledby="...", riferenu à u titulu modale, à .modal, è role="document"à u .modal-dialogstessu. Inoltre, pudete dà una descrizzione di u vostru dialogu modale cù aria-describedbyl' activazione .modal.

Incrustà i video di YouTube

L'incrustazione di i video di YouTube in modali richiede JavaScript addiziale micca in Bootstrap per fermà automaticamente a riproduzione è più. Vede stu utile Stack Overflow post per più infurmazione.

Taglie opzionali

I modali anu trè dimensioni opzionali, dispunibuli via classi di modificatori per esse posti nantu à un .modal-dialog. Queste dimensioni entrano in certi punti di rottura per evità i scrollbars orizontali nantu à i vetri più stretti.

Taglia	Classe	Larghezza massima modale
Picculu	`.modal-sm`	`300px`
Default	Nimu	`500px`
Grande	`.modal-lg`	`800px`
Extra grande	`.modal-xl`	`1140px`

A nostra modale predeterminata senza classa di modificatore custituisce u modale di taglia "mediu".

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Usu

U plugin modale cambia u vostru cuntenutu oculatu nantu à dumanda, via attributi di dati o JavaScript. Aghjunghje ancu .modal-openà l' <body>annullamentu di u cumpurtamentu di scrolling predeterminatu è genera un .modal-backdropper furnisce una zona di clic per dismissing modali mostrati quandu cliccate fora di u modale.

Via attributi di dati

Attivate un modale senza scrive JavaScript. Pone data-toggle="modal"nantu à un elementu di cuntrollu, cum'è un buttone, inseme cù un data-target="#foo"o href="#foo"per destinà un modale specificu per cambià.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Chjamate un modale cù id myModalcù una sola linea di JavaScript:

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

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-backdrop="".

Nome	Tipu	Default	Descrizzione
sfondate	boolean o a stringa`'static'`	veru	Include un elementu di fondu modale. In alternativa, specificate `static`per un sfondate chì ùn chjude micca u modale nantu à u clicu o nantu à a chjave di escape.
tastiera	booleanu	veru	Chiude u modale quandu si preme a chjave di escape
focus	booleanu	veru	Pone l'enfasi nantu à u modale quandu inizializatu.
mostra	booleanu	veru	Mostra u modale quandu inizializatu.

I metudi

Metudi asincroni è transizioni

Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

Vede a nostra documentazione JavaScript per più infurmazione .

`.modal(options)`

Attiva u vostru cuntenutu cum'è modale. Accetta opzioni opzionali object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

Cambia manualmente un modale. Ritorna à u chjamante prima chì u modale hè statu veramente mostratu o oculatu (vale à dì prima chì l' avvenimentu shown.bs.modalo hidden.bs.modalsi faci).

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

`.modal('show')`

Apertura manualmente un modale. Ritorna à u chjamante prima chì u modale hè statu veramente mostratu (vale à dì prima chì l' shown.bs.modalavvenimentu si faci).

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

`.modal('hide')`

Oculta manualmente un modale. Ritorna à u chjamante prima chì a modale hè stata oculata (vale à dì prima chì l' hidden.bs.modalavvenimentu si faci).

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

`.modal('handleUpdate')`

Reajuste manualmente a pusizione di u modale se l'altezza di un modale cambia mentre hè apertu (vale à dì in casu chì una barra di scorrimentu appare).

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

`.modal('dispose')`

Distrughje u modale di un elementu.

Avvenimenti

A classa modale di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità modale. Tutti l'avvenimenti modali sò sparati à u modal stessu (vale à dì à u <div class="modal">).

Tipu d'avvenimentu	Descrizzione
mostra.bs.modale	Questu avvenimentu spara immediatamente quandu u `show`metudu di istanza hè chjamatu. Se hè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a `relatedTarget`pruprietà di l'avvenimentu.
mostratu.bs.modale	Questu avvenimentu hè sparatu quandu u modale hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni CSS finiscinu). Se hè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a `relatedTarget`pruprietà di l'avvenimentu.
nascondere.bs.modale	Questu avvenimentu hè sparatu immediatamente quandu u `hide`metudu di istanza hè statu chjamatu.
hidden.bs.modal	Questu avvenimentu hè sparatu quandu u modale hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni CSS finiscinu).
HidePrevented.bs.modal	Questu avvenimentu hè sparatu quandu u modale hè mostratu, u so sfondate hè `static`è un clic fora di u modale o una pressa di chjave di escape hè realizatu.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})