in English

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.

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:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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="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>

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

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

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.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

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

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

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

Hai un sacco di pulsanti che attivano tutti la stessa modale con contenuti leggermente diversi? Usa event.relatedTargete attributi HTMLdata-* (possibilmente tramite jQuery ) 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-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" 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="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 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').modal('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>

Utilizzo

Il plug-in modale attiva o disattiva i tuoi contenuti nascosti su richiesta, tramite attributi di dati o JavaScript. Aggiunge anche .modal-openal <body>comportamento di scorrimento predefinito per sovrascrivere e genera un'area .modal-backdropdi clic per eliminare i modali mostrati quando si fa clic al di fuori del modale.

Tramite attributi di dati

Attiva un modale senza scrivere JavaScript. Impostato data-toggle="modal"su un elemento del controller, come un pulsante, insieme a data-target="#foo"o href="#foo"per scegliere come target una modale specifica da attivare.

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

Tramite JavaScript

Chiama un modale con id myModalcon una singola riga di JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-backdrop="".

Nome	Tipo	Predefinito	Descrizione
sfondo	booleano o la stringa`'static'`	VERO	Include un elemento di sfondo modale. In alternativa, specificare `static`uno sfondo che non chiude il modale al clic.
tastiera del computer	booleano	VERO	Chiude il modale quando viene premuto il tasto Esc
messa a fuoco	booleano	VERO	Mette lo stato attivo sul modale quando inizializzato.
mostrare	booleano	VERO	Mostra il 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 .

`.modal(options)`

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

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

`.modal('toggle')`

Alterna manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.modalo hidden.bs.modal).

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

`.modal('show')`

Apre manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente mostrato (cioè prima shown.bs.modalche si verifichi l'evento).

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

`.modal('hide')`

Nasconde manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente nascosto (cioè prima hidden.bs.modalche si verifichi l'evento).

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

`.modal('handleUpdate')`

Regolare manualmente la posizione del modale se l'altezza di un modale cambia mentre è aperto (cioè nel caso in cui appaia una barra di scorrimento).

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

`.modal('dispose')`

Distrugge il modale di un elemento.

Eventi

La classe modale di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità modale. Tutti gli eventi modali vengono attivati sul modale stesso (cioè al <div class="modal">).

Tipo di evento	Descrizione
show.bs.modal	Questo evento viene attivato immediatamente quando `show`viene chiamato il metodo dell'istanza. Se causato da un clic, l'elemento cliccato è disponibile come `relatedTarget`proprietà dell'evento.
mostrato.bs.modale	Questo evento viene attivato quando il modale è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS). Se causato da un clic, l'elemento cliccato è disponibile come `relatedTarget`proprietà dell'evento.
nascondi.bs.modale	Questo evento viene generato immediatamente quando `hide`viene chiamato il metodo dell'istanza.
nascosto.bs.modale	Questo evento viene generato quando il modale ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
nascondiPrevented.bs.modal	Questo evento viene attivato quando viene mostrato il modale, il suo sfondo è `static`e viene eseguito un clic al di fuori del modale o la pressione del tasto Esc con l'opzione della tastiera o `data-keyboard`impostata su `false`.

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