“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:
Woohoo, kay qillqasqata huk modal nisqapi ñawinchachkanki!
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.
Titulo modal
Manam wichqasaqchu hawaypi ñitiykuptikiqa. Ama escape nisqa teclatapas ñit’iyta munaychu.
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 ejemplopaq huk hatunyachiy animacionta, churayta atinki $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 role="dialog"chaymanta aria-labelledby="...", referenciando el título modal, a .modal, y role="document"a la .modal-dialogmisma. aria-describedbyChaymantapas, on nisqawanmi modal rimanakuyniykimanta willakuyta quwaq .modal.
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:
Incluye un elemento de telón de fondo modal. Hukninpi, statichuk telón de fondopaq willay mayqinchus mana modal ñit'iy utaq ayqiy llave ñit'iy wichq'anchu.
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 .
Kay ruwayqa llamk'achisqa mayk'aq modal rikuchikun, telón de fondo kaqnin staticchaymanta huk ñit'iy modal hawapi utaq huk ayqikuy llave ñit'iy ruwasqa.