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.

In sta pagina

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:

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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.

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

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Verticalmente centratu

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

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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è attributi HTMLdata-bs-* per varià u cuntenutu di u modale secondu u buttone hè stata 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-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<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">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Cambia trà i modali

Basta trà parechje modali cù qualchì piazzamentu intelligente di data-bs-targete data-bs-toggleattributi. Per esempiu, pudete cambià un modal di resettore di password da un signu digià apertu in modale. Per piacè nutate chì parechje modali ùn ponu esse aperti à u stessu tempu - stu metudu bascule solu trà dui modali separati.

Apri prima modale

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

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" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Alture dinamiche

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

L'accessibilità

Assicuratevi di aghjunghje aria-labelledby="...", in riferimentu à u titulu modale, à .modal. Inoltre, pudete dà una descrizzione di u vostru dialogu modale cù aria-describedbyl' activazione .modal. Nota chì ùn avete micca bisognu di aghjunghje role="dialog"postu chì l'avemu digià aghjustatu via JavaScript.

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".

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Un altru override hè l'opzione di pop up un modale chì copre a vista di l'utilizatori, dispunibule via classi modificatori chì sò posti nantu à un .modal-dialog.

Classe	A dispunibilità
`.modal-fullscreen`	Sempre
`.modal-fullscreen-sm-down`	Sottu`576px`
`.modal-fullscreen-md-down`	Sottu`768px`
`.modal-fullscreen-lg-down`	Sottu`992px`
`.modal-fullscreen-xl-down`	Sottu`1200px`
`.modal-fullscreen-xxl-down`	Sottu`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Variabili

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

I modali responsive fullscreen sò generati via a $breakpointsmappa è un ciclu in scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Usu

U plugin modale cambia u vostru cuntenutu oculatu nantu à dumanda, via attributi di dati o JavaScript. Hè ancu annullatu 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-bs-toggle="modal"nantu à un elementu di cuntrollu, cum'è un buttone, inseme cù un data-bs-target="#foo"o href="#foo"per destinà un modale specificu per cambià.

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

Via JavaScript

Crea un modale cù una sola linea di JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), 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-bs-, cum'è in data-bs-backdrop="".

Nome	Tipu	Default	Descrizzione
`backdrop`	boolean o a stringa`'static'`	`true`	Include un elementu di fondu modale. In alternativa, specificate `static`per un sfondate chì ùn chjude micca u modale nantu à cliccà.
`keyboard`	booleanu	`true`	Chiude u modale quandu si preme a chjave di escape
`focus`	booleanu	`true`	Pone l'enfasi nantu à 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 .

Opzioni di passà

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

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.toggle()

mostra

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.show()

Inoltre, pudete passà un elementu DOM cum'è un argumentu chì pò esse ricevutu in l'avvenimenti modali (cum'è a relatedTargetpruprietà).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ammuccià

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.hide()

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.handleUpdate()

disposti

Distrughje u modale di un elementu. (Elimina i dati almacenati nantu à l'elementu DOM)

myModal.dispose()

getInstance

Metudu staticu chì permette di ottene l'istanza modale assuciata à un elementu DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Metudu staticu chì permette di ottene l'istanza modale assuciata à un elementu DOM, o creanu un novu in casu ùn hè micca inizializatu

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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 di avvenimentu	Descrizzione
`show.bs.modal`	Questu avvenimentu spara immediatamente quandu u `show`metudu di istanza hè chjamatu. Sè causatu da un clic, l'elementu clicatu hè dispunibule cum'è a `relatedTarget`pruprietà di l'avvenimentu.
`shown.bs.modal`	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 `relatedTarget`pruprietà di l'avvenimentu.
`hide.bs.modal`	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 cù l'opzione di u teclatu o `data-bs-keyboard`pusatu à `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})