Modale

Usa il plug-in modale JavaScript di Bootstrap per aggiungere finestre di dialogo al tuo sito per lightbox, notifiche utente o contenuto completamente personalizzato.

Su questa pagina

Come funziona

Prima di iniziare con il componente modale di Bootstrap, assicurati di leggere quanto segue poiché le nostre opzioni di menu sono cambiate di recente.

I modali sono costruiti con HTML, CSS e JavaScript. Sono posizionati su tutto il resto del documento e rimuovono lo scorrimento in <body>modo che il contenuto modale scorra invece.
Cliccando sullo “sfondo” modale si chiuderà automaticamente il modale.
Bootstrap supporta solo una finestra modale alla volta. Le modalità nidificate non sono supportate poiché riteniamo che siano esperienze utente scadenti.
I modali usano position: fixed, che a volte può essere un po' particolare riguardo al suo rendering. Quando possibile, posiziona il tuo HTML modale in una posizione di primo livello per evitare potenziali interferenze da altri elementi. È probabile che si verifichino problemi durante l'annidamento di un .modalelemento all'interno di un altro elemento fisso.
Ancora una volta, a causa di position: fixed, ci sono alcuni avvertimenti con l'utilizzo di modali sui dispositivi mobili. Consulta i nostri documenti di supporto del browser per i dettagli.
A causa del modo in cui HTML5 definisce la sua semantica, l' autofocusattributo HTML non ha effetto nelle modali Bootstrap. Per ottenere lo stesso effetto, usa del JavaScript personalizzato:

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

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

L'effetto di animazione di questo componente dipende dalla prefers-reduced-motionmedia query. Vedi la sezione movimento ridotto della nostra documentazione sull'accessibilità .

Continua a leggere per demo e linee guida sull'utilizzo.

Esempi

Di seguito è riportato un esempio modale statico (che significa positionche displayè stato sovrascritto). Sono inclusi l'intestazione modale, il corpo modale (obbligatorio per padding) e il piè di pagina modale (facoltativo). Ti chiediamo di includere le intestazioni modali con azioni di eliminazione quando possibile o di fornire un'altra azione di eliminazione esplicita.

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

Dimostrazione dal vivo

Attiva o disattiva una demo modale funzionante facendo clic sul pulsante in basso. Scorrerà verso il basso e svanirà dalla parte superiore della 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>

Sfondo statico

Quando lo sfondo è impostato su statico, il modale non si chiude quando si fa clic al di fuori di esso. Fare clic sul pulsante in basso per provarlo.

<!-- 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>

Scorrimento di contenuti lunghi

Quando le modali diventano troppo lunghe per il viewport o il dispositivo dell'utente, scorrono indipendentemente dalla pagina stessa. Prova la demo qui sotto per vedere cosa intendiamo.

Puoi anche creare un modale scorrevole che consente di scorrere il corpo modale aggiungendo .modal-dialog-scrollablea .modal-dialog.

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

Centrato verticalmente

Aggiungi .modal-dialog-centereda .modal-dialogper centrare verticalmente il 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>

Tooltip e popover

Tooltip e popover possono essere inseriti all'interno di modali secondo necessità. Quando i modali vengono chiusi, anche i suggerimenti e i popover all'interno vengono automaticamente eliminati.

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

Usando la griglia

Utilizza il sistema di griglia Bootstrap all'interno di un modale annidando .container-fluidall'interno del file .modal-body. Quindi, usa le normali classi del sistema di griglia come faresti altrove.

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

Hai un sacco di pulsanti che attivano tutti la stessa modale con contenuti leggermente diversi? Utilizzare event.relatedTargete gli attributi HTMLdata-bs-* per variare il contenuto del modale a seconda del pulsante su cui è stato fatto clic.

Di seguito è riportata una demo dal vivo seguita da HTML e JavaScript di esempio. Per ulteriori informazioni, leggere i documenti degli eventi modali per i dettagli su 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
})

Passa da una modale all'altra

Passa da una modalità all'altra con un posizionamento intelligente degli attributi data-bs-targete . data-bs-toggleAd esempio, è possibile attivare una modalità di reimpostazione della password da una modalità di accesso già aperta. Tieni presente che non è possibile aprire più modali contemporaneamente : questo metodo consente semplicemente di alternare tra due modali separati.

Apri il primo 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 animazione

La $modal-fade-transformvariabile determina lo stato di trasformazione .modal-dialogprima dell'animazione di dissolvenza in entrata modale, la $modal-show-transformvariabile determina la trasformazione .modal-dialogalla fine dell'animazione di dissolvenza in entrata modale.

Se vuoi ad esempio un'animazione ingrandita, puoi impostare $modal-fade-transform: scale(.8).

Rimuovi l'animazione

Per i modali che appaiono semplicemente invece di essere visualizzati in dissolvenza, rimuovi la .fadeclasse dal markup modale.

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

Altezze dinamiche

Se l'altezza di una modale cambia mentre è aperta, dovresti chiamare myModal.handleUpdate()per regolare nuovamente la posizione della modale nel caso in cui appaia una barra di scorrimento.

Accessibilità

Assicurati di aggiungere aria-labelledby="...", facendo riferimento al titolo modale, a .modal. Inoltre, puoi fornire una descrizione della tua finestra di dialogo modale con aria-describedbysu .modal. Nota che non è necessario aggiungere role="dialog"poiché lo aggiungiamo già tramite JavaScript.

Incorporamento di video di YouTube

L'incorporamento di video di YouTube in modalità modali richiede JavaScript aggiuntivo non in Bootstrap per interrompere automaticamente la riproduzione e altro ancora. Per ulteriori informazioni, vedere questo utile post sull'overflow dello stack .

Dimensioni opzionali

I modali hanno tre dimensioni opzionali, disponibili tramite classi di modificatori da posizionare su un file .modal-dialog. Queste dimensioni si attivano in determinati punti di interruzione per evitare barre di scorrimento orizzontali su finestre più strette.

Dimensione	Classe	Larghezza massima modale
Piccolo	`.modal-sm`	`300px`
Predefinito	Nessuno	`500px`
Di grandi dimensioni	`.modal-lg`	`800px`
Extra grande	`.modal-xl`	`1140px`

La nostra classe modale predefinita senza modificatore costituisce la dimensione modale "media".

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

Un altro override è l'opzione per far apparire una modale che copre la finestra utente, disponibile tramite classi di modifica che sono posizionate su un file .modal-dialog.

Classe	Disponibilità
`.modal-fullscreen`	Sempre
`.modal-fullscreen-sm-down`	Sotto`576px`
`.modal-fullscreen-md-down`	Sotto`768px`
`.modal-fullscreen-lg-down`	Sotto`992px`
`.modal-fullscreen-xl-down`	Sotto`1200px`
`.modal-fullscreen-xxl-down`	Sotto`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);

Ciclo continuo

Le modalità a schermo intero reattive vengono generate tramite la $breakpointsmappa e un loop 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);
      }
    }
  }
}

Utilizzo

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.

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

Via JavaScript

Create a modal with a single line of JavaScript:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".

Name	Type	Default	Description
`backdrop`	boolean or the string `'static'`	`true`	Include un elemento di sfondo modale. In alternativa, specificare `static`uno sfondo che non chiude il modale al clic.
`keyboard`	booleano	`true`	Chiude il modale quando viene premuto il tasto Esc
`focus`	booleano	`true`	Mette lo stato attivo sul modale quando inizializzato.

Metodi

Metodi e transizioni asincrone

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

Consulta la nostra documentazione JavaScript per ulteriori informazioni .

Opzioni di passaggio

Attiva il tuo contenuto come modale. Accetta opzioni opzionali object.

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

alternare

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

myModal.toggle()

show

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

myModal.show()

Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).

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

hide

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

myModal.hide()

handleUpdate

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

myModal.handleUpdate()

dispose

Destroys an element’s modal. (Removes stored data on the DOM element)

myModal.dispose()

getInstance

Static method which allows you to get the modal instance associated with a DOM element

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

getOrCreateInstance

Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialised

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

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event type	Description
`show.bs.modal`	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`shown.bs.modal`	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`hide.bs.modal`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.modal`	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
`hidePrevented.bs.modal`	This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option or `data-bs-keyboard` set to `false`.

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