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.modal
huk takyasqa elemento ukhupi huk anidado kaqpi. - Huk kutitawan, ,rayku
position: fixed
wakin advertenciakuna kanku dispositivokuna móviles kaqpi modales llamk'achiyninwan. Rikuy maskaq yanapakuy qillqaykumanta aswan sut'inchaykunapaq. - Imayna HTML5 semántica kaqninta riqsichisqanrayku, HTML
autofocus
atributo mana Bootstrap modales kaqpi ruwayniyuqchu. Kikin ruwayta aypanaykipaq, wakin ruwasqa JavaScript llamk'achiy:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
medios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway
.
Ñawinchaytapuni demostracionkunapaq chaymanta llamk'achinapaq kamachiykunapaq.
Ejemplos
Componentes modales nisqa
Uraypi huk ejemplo modal estáticoposition
(niyta munan su y display
han 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="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 patamanta 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-scrollable
yapaspa .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Verticalmente chawpichasqa
Yanapay .modal-dialog-centered
a .modal-dialog
modal 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 popoverkuna 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-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="#" 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-fluid
llamk'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.relatedTarget
chaymanta 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
.
<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>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var 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.
var modalTitle = exampleModal.querySelector('.modal-title')
var 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-target
chaymanta data-bs-toggle
atributokuna. Ejemplopaq, huk contraseña kutichiy modal kaqmanta huk kichasqaña signo modal kaqpi tikrayta atikunki. Ama hina kaspa, achka modalkunaqa manam huk pachallapi kichasqachu kanman —kay ñanqa iskay sapaq modalkunapura tikranlla.
<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" data-bs-dismiss="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" data-bs-dismiss="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-transform
tikray estadota kamachin, tikraq modal fade-in animación tukukuyninpi tikrayta kamachin ..modal-dialog
$modal-show-transform
.modal-dialog
Sichus munanki huk rikch'anapaq huk hatunyachiy kuyuchiyta, churayta atikunki $modal-fade-transform: scale(.8)
.
Animación nisqamanta hurquy
Modalkuna qhawanapaq mana chinkaylla rikuriqllapaq, .fade
claseta 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-describedby
Chaymantapas, 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 |
Uray576px |
.modal-fullscreen-md-down |
Uray768px |
.modal-fullscreen-lg-down |
Uray992px |
.modal-fullscreen-xl-down |
Uray1200px |
.modal-fullscreen-xxl-down |
Uray1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
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: rgba($black, .2);
$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: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-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-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 $breakpoints
chaymanta 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 {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
Uso
Modal plugin pakasqa willayniyki mañakuypi tikran, willay atributokuna utaq JavaScript kaqnintakama. Hinallataq, ñawpaqmanta kuyuchiy ruwayta llallichin chaymanta .modal-backdrop
huk ñit'iy áreata qunanpaq rikuchisqa modalkunata qarqunapaq modal hawapi ñit'iypi.
Atributos de datos nisqawan
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>
JavaScript nisqawan
JavaScript nisqap huklla chirunwan huk modal nisqatam ruray:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Akllanakuna
Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-bs-
, imaynachus data-bs-backdrop=""
.
Suti | Niraq | Ñawpaqchasqa | Willay |
---|---|---|---|
backdrop |
boolean icha chay watiqa'static' |
true |
Incluye un elemento de telón de fondo modal. Hukninpi, static huk telón de fondopaq willay mayqinchus mana modal ñit'iypi wichq'anchu. |
keyboard |
boolean nisqa | true |
Escape llave ñit'isqa kaptin modal nisqatam wichqan |
focus |
boolean nisqa | true |
Inicializasqa kaptin modal nisqapi enfoqueta churan. |
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 .
Opciones de paso
Contenidoykita huk modal hina activan. Huk akllana akllanakunata chaskikun object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle nisqa
Manualmente huk modal nisqatam tikran. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.modal
utaq hidden.bs.modal
ruway ruwakuchkaptin).
myModal.toggle()
qawachiy
Manualmente kichan huk modal. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.modal
ruway ruwakuchkaptin).
myModal.show()
Hinallataq, huk DOM elementota huk argumento hina pasayta atikunki mayqinchus modal ruwaykunapi chaskiyta atikun ( relatedTarget
propiedad hina).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
pakay
Manualmente pakakun huk modal. Llamaqman kutimun manaraq modal chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.modal
ruway ruwakuchkaptin).
myModal.hide()
handleActualizar
Makiwan modalpa kayninta musuqmanta allichay sichus huk modalpa sayaynin kichasqa kachkaptin tikrakun (icha huk barra de desplazamiento rikuriptin).
myModal.handleUpdate()
wischuy
Huk elementopa modal nisqa kaynintam chinkachin. (DOM elementopi waqaychasqa willayta hurqun)
myModal.dispose()
GetInstancia
Método estático kaqmanta mayqinchus huk DOM elementowan tinkisqa instancia modal kaqmanta jap'iyta atikun
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
Instanciata tariyUtaq Ruway
Método estático mayqinchus huk DOM elementowan tinkisqa modal instanciata hap'iyta atikun, utaq musuq ruwayta sichus mana qallarisqachu karqa
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Eventos nisqakuna
Bootstrap kaqpa modal clasen huk pisi ruwaykunata rikuchin modal ruwanakunaman enganche kaqpaq. Llapan modal ruwaykuna kikin modal kaqpi (ichataq <div class="modal">
).
Tipo de evento | Willay |
---|---|
show.bs.modal |
Kay ruwayqa chaylla rawrarin show instancia método waqyasqa kaqtin. Sichus huk ñit'iywan ruwasqa, ñit'isqa elementoqa ruwaypa relatedTarget propiedadnin hinam kachkan. |
shown.bs.modal |
Kay ruwayqa llamk'achisqa kachkan mayk'aq modal ruwaqpaq rikukuq ruwasqa (suyanqa CSS tikraykuna tukukunanta). Sichus huk ñit'iywan ruwasqa, ñit'isqa elementoqa ruwaypa relatedTarget propiedadnin hinam kachkan. |
hide.bs.modal |
Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hide instancia 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 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-bs-keyboard churasqa false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})