Saltar al contenido principal Salta a docs navegación
Check
in English

Modal

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

Kay p'anqapi

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:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.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.

Titulo modal

Texto cuerpo modal nisqa kayman rin.

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

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

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

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.

Huk kuyuchiy atiy modaltapas ruwayta atinki, chaytaq modal kurku kuyuchiyta saqin kayman .modal-dialog-scrollableyapaspa .modal-dialog.

<!-- 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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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 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>

Contenido modal nisqa hukniray

¿Huk qutu botonesniyuqchu kanki, chaytaq tukuyninku kikin modalllata llamk’achinku, juk chhika wak contenidoyuq? Utilizar event.relatedTargetchaymanta HTML data-bs-*atributokuna 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.

html nisqapi 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Modalkunapura tikray

Achka modalkunapura tikray wakin yachaysapa churaywan chaymanta data-bs-targetchaymanta data-bs-toggleatributokuna. Ejemplopaq, huk contraseña kutichiy modal kaqmanta huk kichasqaña signo modal kaqpi tikrayta atikunki. Ama hina kaspa, achka modalkuna mana huk pachallapi kichasqa kayta atinkuchu —kay ñanqa iskay sapaq modalkunapura tikranlla.

Ñawpaq kaq modal kichay
html nisqapi 
<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">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">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>

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

Modal de pantalla completa

Huk llalliyqa huk modal lluqsinanpaq akllana kachkan chaymanta ruwaq qhaway punkuta qatakun, huk tikraq clasekuna kaqnintakama tarikun chaymanta huk kaqpi churasqa .modal-dialog.

Yachakuna Disponibilidad nisqa
.modal-fullscreen Sapa kuti
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, modales kunan llaqta CSS tikraqkunata llamk'achinku .modalchaymanta .modal-backdropaswan allin chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass variables nisqakuna

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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);

Kutipayay

Kutichiy pantalla hunt'a modales ruwasqa kanku mapa kaqnintakama $breakpointschaymanta huk llimp'i kaqpi 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,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

Uso

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

Atributos de datos nisqawan

Toggle nisqa

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

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

Chanqapuy

Despidoqa atikunmanmi dataatributowan huk botón ukhupi modal ukhupi kay urapi rikuchisqa hina:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

utaq huk botón hawa modal kaqpi kay data-bs-targeturapi rikuchisqa hina llamk'achispa:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Iskaynin ñankuna huk modalta qarqunapaq yanapasqa kaptinpas, yuyaypi hap'iy huk modal hawamanta qarquyqa mana tupanchu ARIA Qillqana Ruwaykuna Guía rimanakuna (modal) ruwanawan . Chaytaqa qanpa riesgoykiwanmi ruway.

JavaScript nisqawan

JavaScript nisqap huklla chirunwan huk modal nisqatam ruray:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Akllanakuna

Imaynachus akllanakuna willay layakuna utaq JavaScript kaqninta pasayta atikun, huk akllana sutita yapayta atikunki kayman data-bs-, imaynachus data-bs-animation="{value}". Aseguray akllana sutimanta caso laya “ camelCase ” kaqmanta “ kebab-case ” kaqman tikrayta mayk’aq akllanakunata atributos de datos kaqninta pasaspa. Ejemplopaq data-bs-custom-class="beautifier", data-bs-customClass="beautifier".

Bootstrap 5.2.0 kaqmanta, llapa componentakuna huk experimental waqaychasqa willay laya yanapakuyta yanapakunku data-bs-configmayqinchus JSON watiqa hina sanu componente ruwayta wasichayta atin. Huk elemento data-bs-config='{"delay":0, "title":123}'chaymanta data-bs-title="456"layakunayuq kaqtin, qhipa titlechanin kanqa 456chaymanta sapaq willay layakuna qusqa chanikunata llallichinqa data-bs-config. Chaymanta, kunan kaq willay layakuna JSON chanikunata wasichayta atinku kayhina data-bs-delay='{"show":0,"hide":150}'.

Suti Niraq Ñawpaqchasqa Willay
backdrop boolean, .'static' true Incluye un elemento de telón de fondo modal. Hukninpi, statichuk telón de fondopaq willay mayqinchus mana modalta wichq'anchu ñit'isqa kaqtin.
focus boolean nisqa true Inicializasqa kaptin modal nisqapi enfoqueta churan.
keyboard boolean nisqa true Escape llave ñit'isqa kaptin modal nisqatam wichqan.

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 .

Opciones de paso

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

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Imayna Willay
dispose Huk elementopa modal nisqa kaynintam chinkachin. (DOM elementopi waqaychasqa willayta hurqun)
getInstance Método estático kaqmanta mayqinchus huk DOM elementowan tinkisqa instancia modal kaqmanta jap'iyta atikun.
getOrCreateInstance Método estático mayqinchus huk DOM elementowan tinkisqa modal instanciata hap'iyta atikun, utaq musuq ruwayta sichus mana qallarisqachu karqan.
handleUpdate Makiwan modalpa kayninta musuqmanta allichay sichus huk modalpa sayaynin kichasqa kachkaptin tikrakun (icha huk barra de desplazamiento rikuriptin).
hide Manualmente pakakun huk modal. Llamaqman kutimun manaraq modal chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.modalruway ruwakuchkaptin).
show Manualmente kichan huk modal. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.modalruway ruwakuchkaptin). Hinallataq, huk DOM elementota huk argumento hina pasayta atikunki mayqinchus modal ruwaykunapi chaskiyta atikun ( relatedTargetpropiedad hina). (es decir const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Manualmente huk modal nisqatam tikran. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.modalutaq hidden.bs.modalruway ruwakuchkaptin).

Eventos nisqakuna

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

Ruwana Willay
hide.bs.modal Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
hidden.bs.modal Kay ruwayqa llamk'achisqa kachkan mayk'aq modal llamk'aqmanta pakasqa kayta tukusqa (suyanqa CSS tikraykunata tukunanta).
hidePrevented.bs.modal Kay ruwayqa modal rikuchisqa kaqtin, telón de fondo nisqa staticchaymanta huk ñit'iy modal hawapi ruwasqa kaqtin rawrachisqa. Chay ruwaypas llamk'achisqa kan ayqina llave ñit'isqa kaptin chaymanta keyboardakllana false.
show.bs.modal Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa. Sichus huk ñit'iywan ruwasqa, ñit'isqa elementoqa ruwaypa relatedTargetpropiedadnin hinam kachkan.
shown.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 relatedTargetpropiedadnin hinam kachkan. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})