in English

Modal

Utilitzeu el connector modal de JavaScript de Bootstrap per afegir diàlegs al vostre lloc per a caixes de llum, notificacions d'usuari o contingut completament personalitzat.

Com funciona

Abans de començar amb el component modal de Bootstrap, assegureu-vos de llegir el següent, ja que les nostres opcions de menú han canviat recentment.

Els modals es creen amb HTML, CSS i JavaScript. Es col·loquen sobre tota la resta del document i eliminen el desplaçament de <body>manera que el contingut modal es desplaça.
Si feu clic al "teló de fons" modal, tancarà automàticament el modal.
Bootstrap només admet una finestra modal alhora. No s'admeten els modalitats imbricades, ja que creiem que són experiències d'usuari deficients.
Els modals utilitzen position: fixed, que de vegades pot ser una mica particular pel que fa a la seva representació. Sempre que sigui possible, col·loqueu el vostre HTML modal en una posició de primer nivell per evitar possibles interferències d'altres elements. És probable que tingueu problemes en niuar un .modaldins d'un altre element fix.
Una vegada més, a causa de position: fixed, hi ha algunes advertències amb l'ús de modals en dispositius mòbils. Consulteu els nostres documents d'assistència per al navegador per obtenir més informació.
A causa de com HTML5 defineix la seva semàntica, l' autofocusatribut HTML no té cap efecte en els modals d'Bootstrap. Per aconseguir el mateix efecte, utilitzeu JavaScript personalitzat:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

Continueu llegint per obtenir demostracions i directrius d'ús.

Exemples

A continuació es mostra un exemple modal estàticposition (és a dir, el seu i displays'han substituït). S'inclouen la capçalera modal, el cos modal (obligatori per a padding) i el peu de pàgina modal (opcional). Us demanem que incloeu capçaleres modals amb accions d'ignoració sempre que sigui possible o proporcioneu una altra acció d'ignorar explícita.

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

Commuteu una demostració modal de treball fent clic al botó següent. Es lliscarà cap avall i s'esvaeix des de la part superior de la pàgina.

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

Teló de fons estàtic

Quan el fons s'estableix com a estàtic, el modal no es tancarà en fer clic fora d'ell. Feu clic al botó següent per provar-ho.

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

Desplaçament de contingut llarg

Quan els modals es fan massa llargs per a la finestra o el dispositiu de l'usuari, es desplacen independentment de la pròpia pàgina. Proveu la demostració a continuació per veure què volem dir.

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.

També podeu crear un modal desplaçable que permeti desplaçar-vos pel cos del modal afegint .modal-dialog-scrollable- hi .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>

Centrat verticalment

Afegiu .modal-dialog-centereda .modal-dialogper centrar verticalment el modal.

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

Consells d'eines i popovers

Els consells sobre eines i les finestres emergents es poden col·locar dins de modalitats segons sigui necessari. Quan es tanquen les modalitats, també es descarten automàticament qualsevol informació sobre eines i finestres emergents.

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

Utilitzant la graella

Utilitzeu el sistema de quadrícula Bootstrap dins d'un modal nidificant .container-fluiddins del fitxer .modal-body. A continuació, utilitzeu les classes normals del sistema de graella com ho faríeu en qualsevol altre lloc.

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

Tens un munt de botons que activen tots el mateix modal amb continguts lleugerament diferents? Utilitzeu event.relatedTargeti atributs HTMLdata-* (possiblement mitjançant jQuery ) per variar el contingut del modal en funció del botó que s'hagi fet clic.

A continuació es mostra una demostració en directe seguida d'exemples d'HTML i JavaScript. Per obtenir més informació, llegiu els documents d'esdeveniments modals per obtenir més informació sobre 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)
})

Canvia l'animació

La $modal-fade-transformvariable determina l'estat de transformació de .modal-dialogabans de l'animació d'esvaïment modal, la $modal-show-transformvariable determina la transformació de .modal-dialogal final de l'animació d'esvaïment modal.

Si voleu, per exemple, una animació amb zoom, podeu configurar $modal-fade-transform: scale(.8).

Elimina l'animació

Per als modals que simplement apareixen en lloc de desaparèixer per veure's, elimineu la .fadeclasse del vostre marcatge modal.

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

Altures dinàmiques

Si l'alçada d'un modal canvia mentre està obert, hauríeu de trucar $('#myModal').modal('handleUpdate')per reajustar la posició del modal en cas que aparegui una barra de desplaçament.

Accessibilitat

Assegureu-vos d'afegir aria-labelledby="...", fent referència al títol modal, a .modal. A més, podeu donar una descripció del vostre diàleg modal amb aria-describedbyon .modal. Tingueu en compte que no cal que l'afegiu role="dialog", ja que ja l'afegim mitjançant JavaScript.

Inserció de vídeos de YouTube

La inserció de vídeos de YouTube en modalitats requereix JavaScript addicional que no estigui a Bootstrap per aturar automàticament la reproducció i molt més. Consulteu aquesta útil publicació de Stack Overflow per obtenir més informació.

Mides opcionals

Els modals tenen tres mides opcionals, disponibles mitjançant classes modificadores per col·locar-los en un fitxer .modal-dialog. Aquestes mides s'inicien en determinats punts d'interrupció per evitar barres de desplaçament horitzontals a les finestres més estretes.

Mida	Classe	Amplada màxima modal
Petit	`.modal-sm`	`300px`
Per defecte	Cap	`500px`
Gran	`.modal-lg`	`800px`
Extra gran	`.modal-xl`	`1140px`

La nostra classe modal per defecte sense modificador constitueix el modal de mida "mitjana".

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

Ús

El connector modal alterna el contingut ocult a demanda, mitjançant atributs de dades o JavaScript. També s'afegeix .modal-openal <body>comportament de desplaçament predeterminat per anul·lar i genera una .modal-backdropàrea de clic per descartar els modals mostrats quan es fa clic fora del modal.

Mitjançant atributs de dades

Activa un modal sense escriure JavaScript. Estableix data-toggle="modal"en un element del controlador, com un botó, juntament amb un data-target="#foo"o href="#foo"per orientar un modal específic per alternar.

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

Mitjançant JavaScript

Truqueu a un modal amb id myModalamb una sola línia de JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-backdrop="".

Nom	Tipus	Per defecte	Descripció
teló de fons	booleà o la cadena`'static'`	veritat	Inclou un element de fons modal. Alternativament, especifiqueu `static`un teló de fons que no tanqui el modal en fer clic.
teclat	booleà	veritat	Tanca el modal quan es prem la tecla d'escapament
focus	booleà	veritat	Posa el focus en el modal quan s'inicialitza.
espectacle	booleà	veritat	Mostra el modal quan s'inicialitza.

Mètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació .

`.modal(options)`

Activa el teu contingut com a modal. Accepta opcions opcionals object.

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

`.modal('toggle')`

Commuta manualment un modal. Torna a la persona que truca abans que el modal s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.modalo ).hidden.bs.modal

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

`.modal('show')`

Obre manualment un modal. Torna a la persona que truca abans que s'hagi mostrat realment el modal (és a dir, abans shown.bs.modalque es produeixi l'esdeveniment).

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

`.modal('hide')`

Amaga manualment un modal. Torna a la persona que truca abans que el modal s'hagi amagat (és a dir, abans hidden.bs.modalque es produeixi l'esdeveniment).

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

`.modal('handleUpdate')`

Reajusteu manualment la posició del modal si l'alçada d'un modal canvia mentre està obert (és a dir, en cas que aparegui una barra de desplaçament).

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

`.modal('dispose')`

Destrueix el modal d'un element.

Esdeveniments

La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal. Tots els esdeveniments modals es desencadenen al propi modal (és a dir, al <div class="modal">).

Tipus d'esdeveniment	Descripció
show.bs.modal	Aquest esdeveniment s'activa immediatament quan `show`es crida al mètode d'instància. Si és causat per un clic, l'element clicat està disponible com a `relatedTarget`propietat de l'esdeveniment.
mostrat.bs.modal	Aquest esdeveniment s'activa quan el modal s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS). Si és causat per un clic, l'element clicat està disponible com a `relatedTarget`propietat de l'esdeveniment.
ocultar.bs.modal	Aquest esdeveniment s'activa immediatament quan `hide`s'ha cridat el mètode d'instància.
hidden.bs.modal	Aquest esdeveniment s'activa quan el modal s'ha acabat d'ocultar a l'usuari (esperarà que finalitzin les transicions CSS).
hiddePrevented.bs.modal	Aquest esdeveniment s'activa quan es mostra el modal, el seu teló de fons `static`i es fa un clic fora del modal o es prem una tecla d'escapament amb l'opció del teclat o `data-keyboard`s'estableix a `false`.

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