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')
})

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>

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>

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>

Variante cuntenuti modali

Avete una mansa di buttone chì tutti attivanu u listessu modale cù un cuntenutu ligeramente sfarente? Aduprate event.relatedTargetè 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)
})

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="...", in riferimentu à 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 duie 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.

<!-- 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">
    <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">
    <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 staticper un sfondate chì ùn chjude micca u modale nantu à cliccà.
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 showmetudu di istanza hè chjamatu. Sè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a relatedTargetpruprietà 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). Sè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a relatedTargetpruprietà di l'avvenimentu.
nascondere.bs.modale Questu avvenimentu hè sparatu immediatamente quandu u hidemetudu 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). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})