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.

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 è guida d'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="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" 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>

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

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.

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.

Pudete ancu creà un modal scrollable chì permette di scroll u corpu modale aghjunghjendu .modal-dialog-scrollableà .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>

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-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è 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" 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 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').modal('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>

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 à 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 `show`metudu di istanza hè chjamatu. Sè 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). Sè 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 cù l'opzione di u teclatu o `data-keyboard`pusatu à `false`.

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