Modal

Bootstrap kaqpa JavaScript modal plugin kaqninta llamk'achiy rimanakuna kitiykiman yapanapaq lightboxes kaqpaq, user willaykunapaq utaq tukuyninpi ruwasqa ruwanakuna kaqpaq.

Imayna llamkan

Manaraq Bootstrap kaqpa componente modal kaqwan qallarichkaspa, ama hina kaspa kayta ñawiriy imaynachus menú akllanayku chayllaraq tikrasqa kanku.

Modalkuna HTML, CSS, JavaScript kaqwan ruwasqa kanku. Paykunaqa tukuy imamanta qillqapi churasqa kachkanku chaymanta kuyuchiyta chaymanta hurqunku chaymanta chaymanta <body>contenido modal kuyuchiykuna rantinpi.
“Telón de fondo” modal nisqapi ñit’iyqa kikillanmantan modal nisqa wisq’akunqa.
Bootstrap huk modal ventanallata huk kutipi yanapan. Anidado modales mana yanapasqachu kanku imaynachus iñiyku mana allin ruwaq experienciakuna kasqankuta.
Modales llamk'achinku position: fixed, mayqinchus wakin kuti huk chhika particular kanman su renderización. Mayk'aq atikuqtin, HTML modal kaqniyki huk pata pata kaqpi churay mana wak elementokunamanta hark'akuy atiyniyuq kananpaq. Yaqapaschá sasachakuykunawan tupanki .modalhuk takyasqa elemento ukhupi huk anidado kaqpi.
Huk kutitawan, ,rayku position: fixedwakin advertenciakuna kanku dispositivokuna móviles kaqpi modales llamk'achiyninwan. Rikuy maskaq yanapakuy qillqaykumanta aswan sut'inchaykunapaq.
Imayna HTML5 semántica kaqninta riqsichisqanrayku, HTML autofocusatributo mana Bootstrap modales kaqpi ruwayniyuqchu. Kikin ruwayta aypanaykipaq, wakin ruwasqa JavaScript llamk'achiy:

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

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Ñawinchaytapuni demostracionkunapaq chaymanta llamk'achinapaq kamachiykunapaq.

Ejemplos

Uraypi huk ejemplo modal estáticoposition (niyta munan su y displayhan sido sobrepasado). Chaypi churasqa kanku modal umalliq, modal cuerpo (paq mañasqa padding), modal chaki (munasqa). Mañakuyku modal umalliqkunata qarquy ruwaykunawan mayk'aq atikuqtin churanaykipaq, utaq wak sut'i qarquy ruwayta qunaykipaq.

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

Demostración en vivo

Huk llamk'aq modal demota tikray uraypi ñit'ispa. Chayqa urayman llimp’inqa, chaymantataq p’anqa patamantapacha chinkapunqa.

<!-- 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ón de fondo estático

Telón de fondo estático kaqman churasqa kaqtin, modal mana wichq'akunqachu hawanpi ñit'ispa. Uraypi kaq botonta ñit’iy chayta pruebanaykipaq.

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

Unay contenidota desplazamiento

Modalkuna llamk'achiqpa qhawana punkunpaq icha dispositivopaq ancha suni kaptin, kikin p'anqamanta mana kamachisqa kuyuchinku. Uraypi demostracionta ruway ima niyta munasqaykumanta yachanaykipaq.

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.

Huk kuyuchiy atiy modaltapas ruwayta atinki, chaytaq modal kurku kuyuchiyta saqin kayman .modal-dialog-scrollableyapaspa .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 chawpichasqa

Yanapay .modal-dialog-centereda .modal-dialogmodal nisqa sayaq chawpiman churanapaq.

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

Consejos de herramientas y popovers

Herramientas nisqapas , popovers nisqakunatapas necesitasqanman hinam modales nisqa ukupi churakunman. Modalkuna wichqasqa kaqtinku, ima yanapakuypa yanapakuyninkuna chaymanta popovers ukhupi kaqpas kikillanmanta qarqusqa kanku.

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

Rejilla nisqawan yanapachikuspa

Huk modal ukhupi Bootstrap rejilla sistemata .container-fluidllamk'achiy .modal-body. Chaymanta, normal red sistema clasekunata llamk'achiy imaynachus maypipas ruwanki hina.

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

¿Huk qutu botonesniyuqchu kanki, chaytaq tukuyninku kikin modalllata llamk’achinku, juk chhika wak contenidoyuq? Utilizar event.relatedTargetchaymanta HTML data-*atributokuna (ichapas jQuery kaqnintakama ) modal kaqpa imayna kayninta tikranapaq mayqin ñit'ina ñit'isqa kasqanmanhina.

Uraypi huk kawsaq demo qatiqninpi ejemplo HTML chaymanta JavaScript. Aswan willakuypaq, ñawiriy modal eventos docs kaqpi sut'inchaykunapaq 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)
})

Cambiar animación

Tikraqqa manaraq modal fade-in animación kachkaptin $modal-fade-transformtikray estadota kamachin, tikraq modal fade-in animación tukukuyninpi tikrayta kamachin ..modal-dialog$modal-show-transform.modal-dialog

Sichus munanki ejemplopaq huk hatunyachiy animacionta, churayta atinki $modal-fade-transform: scale(.8).

Animación nisqamanta hurquy

Modalkuna qhawanapaq mana chinkaylla rikuriqllapaq, .fadeclaseta modal markaykimanta hurquy.

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

Alturas dinámicas nisqa

Sichus huk modalpa sayaynin kichasqa kachkaptin tikrakun, waqyanayki $('#myModal').modal('handleUpdate')tiyan modalpa maypi kayninta musuqmanta allichanaykipaq sichus huk barra de desplazamiento rikhurinman.

Accesibilidad nisqa

Aswan allinta yapay aria-labelledby="...", modal tituluta riqsichispa, .modal. aria-describedbyChaymantapas, on nisqawanmi modal rimanakuyniykimanta willakuyta quwaq .modal. Reparay mana role="dialog"yapanaykichu tiyan chaymanta JavaScript kaqnintakama yapaykuña.

YouTube videokunata churay

YouTube videokuna modales kaqpi churayqa huk JavaScript yapasqa mana Bootstrap kaqpi munan kikinmanta pukllayta sayachinapaq chaymanta aswan. Aswan willakuypaq kay yanapakuq Pila Desbordamiento qillqasqata qhaway.

Tamaños opcionales

Modalkuna kimsa akllana sayayniyuq kanku, huk .modal-dialog. Kay sayaykuna wakin p'akiykunapi kick in aswan k'iti qhawaykunapi mana horizontal kuyuchinakuna kananpaq.

Sayay	Yachakuna	Ancho máximo modal
Uchuy	`.modal-sm`	`300px`
Ñawpaqchasqa	Mana mayqinpas	`500px`
Hatun	`.modal-lg`	`800px`
Extra hatun	`.modal-xl`	`1140px`

Nuestro modal predeterminado sin modificador clase constituye el modal de tamaño “medio” nisqa.

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

Uso

Modal plugin pakasqa willayniyki mañakuypi tikran, willay atributokuna utaq JavaScript kaqnintakama. Hinallataq yapan .modal-openchayman <body>ñawpaqmanta kuyuchiy ruwayta llallinanpaq chaymanta .modal-backdrophuk ñit'iy áreata qunanpaq rikuchisqa modalkunata qarqunapaq modal hawapi ñit'iypi ruwan.

Atributos de datos nisqawan

JavaScript qillqaspa mana huk modal nisqa llamk'achiy. Huk kamachiq elemento kaqpi churay data-toggle="modal", huk ñit'ina hina, huk data-target="#foo"utaq href="#foo"huk específico modal kaqman tikranapaq target kaqwan kuska.

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

JavaScript nisqawan

Huk modal id myModalkaqwan huk sapalla chiru JavaScript kaqwan waqyay:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-backdrop="".

Suti	Niraq	Ñawpaqchasqa	Willay
telón de fondo	boolean icha chay watiqa`'static'`	chiqaq	Incluye un elemento de telón de fondo modal. Hukninpi, `static`huk telón de fondopaq willay mayqinchus mana modal ñit'iypi wichq'anchu.
teclado nisqa	boolean nisqa	chiqaq	Escape llave ñit'isqa kaptin modal nisqatam wichqan
chawpi	boolean nisqa	chiqaq	Inicializasqa kaptin modal nisqapi enfoqueta churan.
qawachiy	boolean nisqa	chiqaq	Qallarichisqa kaptin modal nisqatam qawachin.

Métodos

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway .

`.modal(options)`

Contenidoykita huk modal hina activan. Huk akllana akllanakunata chaskikun object.

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

`.modal('toggle')`

Manualmente huk modal nisqatam tikran. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.modalutaq hidden.bs.modalruway ruwakuchkaptin).

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

`.modal('show')`

Manualmente kichan huk modal. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.modalruway ruwakuchkaptin).

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

`.modal('hide')`

Manualmente pakakun huk modal. Llamaqman kutimun manaraq modal chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.modalruway ruwakuchkaptin).

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

`.modal('handleUpdate')`

Makiwan modalpa kayninta musuqmanta allichay sichus huk modalpa sayaynin kichasqa kachkaptin tikrakun (icha huk barra de desplazamiento rikuriptin).

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

`.modal('dispose')`

Huk elementopa modal nisqa kaynintam chinkachin.

Eventos nisqakuna

Bootstrap kaqpa modal clase huk pisi ruwaykunata rikuchin modal ruwanakunaman enganche kaqpaq. Llapan modal ruwaykuna kikin modal kaqpi (ichataq <div class="modal">).

Tipo de Evento	Willay
rikuchiy.bs.modal	Kay ruwayqa chaylla rawrarin mayk'aq `show`instancia método waqyasqa. Sichus huk ñit'iywan ruwasqa, ñit'isqa elementoqa ruwaypa `relatedTarget`propiedadnin hinam kachkan.
rikuchisqa.bs.modal	Kay ruwayqa llamk'achisqa kachkan mayk'aq modal ruwaqman rikukuq ruwasqa (suyanqa CSS tikraykuna tukukunanta). Sichus huk ñit'iywan ruwasqa, ñit'isqa elementoqa ruwaypa `relatedTarget`propiedadnin hinam kachkan.
pakay.bs.modal nisqa	Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq `hide`instancia método waqyasqa kachkan.
pakasqa.bs.modal nisqa	Kay ruwayqa llamk'achisqa kachkan mayk'aq modal llamk'aqmanta pakasqa kayta tukusqa (suyanqa CSS tikraykunata tukunanta).
pakayHark'asqa.bs.modal	Kay ruwayqa llamk'achisqa mayk'aq modal rikuchikun, telón de fondo kaqnin `static`chaymanta huk ñit'iy modal hawapi utaq huk ayqikuy llave ñit'iy ruwasqa teclado akllanawan utaq `data-keyboard`churasqa `false`.

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