in English

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 <body>chayhina modal contenido 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). Chaypin kashan 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 patamanta 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.