“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:
Telón de fondo estático kaqman churasqa kaqtin, modal mana wichq'akunqachu hawanpi ñit'ispa. Uraypi kaq botonta ñit’iy chayta pruebanaykipaq.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
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.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Verticalmente chawpichasqa
Yanapay .modal-dialog-centereda .modal-dialogmodal nisqa sayaq chawpiman churanapaq.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Huk modal ukhupi Bootstrap rejilla sistemata .container-fluidllamk'achiy .modal-body. Chaymanta, normal red sistema clasekunata llamk'achiy imaynachus maypipas ruwanki hina.
Uraypi huk kawsaq demo qatiqninpi ejemplo HTML chaymanta JavaScript. Aswan willakuypaq, ñawiriy modal eventos docs kaqpi sut'inchaykunapaq relatedTarget.
Sichus munanki huk rikch'anapaq huk hatunyachiy kuyuchiyta, churayta atikunki $modal-fade-transform: scale(.8).
Animación nisqamanta hurquy
Modalkuna qhawanapaq mana chinkaylla rikuriqllapaq, .fadeclaseta modal markaykimanta hurquy.
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 rimasqaykimanta willakuyta quwaq .modal. Reparay mana role="dialog"yapanaykichu tiyan chaymanta JavaScript kaqnintakama yapaykuña.
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.
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.
JavaScript nisqawan
Huk modal id myModalkaqwan huk sapalla chiru JavaScript kaqwan waqyay:
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 .