Modal rehegua
Eipuru Bootstrap JavaScript modal plugin emoĩ hag̃ua ñe’ẽñemi nde tenda’ípe tesape’arã, puruhára momarandurã térã contenido personalizado completo-pe g̃uarã.
Mba’éichapa omba’apo
Eñepyrũ mboyve Bootstrap componente modal reheve, emoñe’ẽ katuete ko’ãva ñande menú opción nda’aréi iñambuégui.
- Umi modalidad oñemopuꞌa HTML, CSS ha JavaScript rupive. Oñemohenda hikuái opa mbaꞌe ambue kuatiaroguépe ári ha oipeꞌa desplazamiento-gui
<body>
ikatu hag̃uáicha contenido modal ojedesplaza hendaguépe. - Ojepysóramo “telón de fondo” modal rehe, oñembotýta ijeheguiete pe modal.
- Bootstrap oipytyvõ peteĩ ventána modal añoite peteĩ jeýpe. Umi modal anidado ndojeguerohorýi rogueroviaháicha ha’eha puruhára reko vai.
- Modal oipuru
position: fixed
, ikatúva sapy’ánte ha’e peteĩ mba’e particular’imi irrenderización rehegua. Ikatu jave, emoĩ ne HTML modal peteĩ tenda yvateguápe ani hag̃ua ojejoko ambue elemento-kuéragui. Oiméne rejuhúta mba’e’oka remoĩ jave peteĩ.modal
ambue elemento fijo ryepýpe. - Peteî jey, debido a
position: fixed
, oî algunas advertencias oiporúvo modal umi dispositivo móvil-pe. Ehecha ore kuatiañe’ẽ pytyvõrã kundahára rehegua reikuaa hag̃ua mba’ekuaarã. - Mbaꞌeichaitépa HTML5 omboheko iñeꞌepykuaa, HTML atributo ndoguerekói mbaꞌeveichagua mbaꞌekuaarã umi
autofocus
modal Bootstrap-pe. Ojehupyty hag̃ua peteĩchagua efecto, eipuru peteĩ JavaScript jeporupyre:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
consulta medio rehegua rehe. Ehecha pe
sección movimiento reducido ore kuatia accesibilidad rehegua .
Emoñe’ẽ meme umi demostración ha jepururã ñe’ẽmondo rehegua.
Tembiecharã
Umi componente modal rehegua
Iguýpe oĩ peteĩ techapyrã modal estáticoposition
(he’iséva i ha display
oñemboyke hague). Oike ipype iñakãrapuꞌa modal, retepy modal (oñeikotevẽva padding
) ha ipypegua modal (opcional). Rojerure remoĩ hag̃ua umi iñakãrapu’ã modal orekóva tembiapo ñemboyke ikatu jave, térã eme’ẽ ambue tembiapo ñemboyke hesakãva.
<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 rehegua
Embohasa peteĩ demostración modal omba’apóva eitykuévo pe botón iguýpe. Oguejýta ha oñedesvanece vaʼerã pe páhina yvate guive.
<!-- 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 rehegua
Oñemohenda jave telón de fondo estático-pe, modal noñembotymoꞌãi ojepyso jave okápe. Emboguejy pe botón oĩva iguýpe reñehaʼã hag̃ua.
<!-- 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>
Ojedesplazávo contenido ipukúva
Umi modal ipukuetereíramo puruhára jehechaukaha térã tembipururãme g̃uarã, ojedesplaza ijeheguiete pe páhinagui voi. Eñeha’ã pe demostración oĩva ko’ápe rehecha hag̃ua mba’épa ja’ese.
Ikatu avei ejapo peteĩ modal ojedesplazakuaáva ohejáva ojedesplaza modal retepy emoĩvo .modal-dialog-scrollable
..modal-dialog
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Oñecentra verticalmente
Oñembojoapy .modal-dialog-centered
a .modal-dialog
oñecentra hagua verticalmente pe modal.
<!-- 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>
Tembipururã ñe’ẽmondo ha popovers
Umi tembipuru’i ñe’ẽmondo ha umi popover ikatu oñemoĩ modal ryepýpe oñeikotevẽháicha. Oñembotývo umi modal, oñemboyke avei ijeheguiete oimeraẽva tembipururã ñe’ẽmondo ha umi popover oĩva hyepýpe.
<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>
Oipurúvo pe cuadrícula
Eipuru sistema cuadrícula Bootstrap peteĩ modal ryepýpe emoĩvo anidado .container-fluid
ryepýpe .modal-body
. Upéi, eipuru umi clase sistema red normal rehegua rejapoháicha ambue hendápe.
<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 iñambuéva
¿Reguerekópa peteĩ aty umi botón opavave ombohapéva peteĩchagua modal orekóva contenido iñambue’imiva? Eipuru event.relatedTarget
ha HTML data-bs-*
atributo emoambue hag̃ua modal mbaꞌekuaarã odependéva mbaꞌe botón rehepa ojepyso.
Iguýpe oĩ peteĩ demostración en vivo hapykuéri techapyrã HTML ha JavaScript. Ojeikuaave hag̃ua, emoñe’ẽ umi docs eventos modal rehegua umi detalle rehegua 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
})
Ombohasa umi modal apytépe
Embohasa heta modal apytépe oguerekóva algún colocación iñaranduva umi atributo data-bs-target
ha rehegua. data-bs-toggle
Techapyrã, ikatu emoambue peteĩ modal ñe’ẽñemi jegueru jey peteĩ modal jeike ojepe’ámava ryepýgui. Eñatendéke heta modal ndaikatúi ojepe’a peteĩ jave —ko método ombohasa rei mokõi modal añónte apytépe.
<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>
Omoambue animación
Pe $modal-fade-transform
mbaꞌekuaarã ohechakuaa mbaꞌeichaitépa oñembohasa .modal-dialog
pe animación modal fade-in mboyve, pe $modal-show-transform
mbaꞌekuaarã ohechakuaa pe transformada de .modal-dialog
opakuévo pe modal fade-in animación.
Oipotáramo techapyrãramo peteĩ taꞌãngamýi oñembotuichave hag̃ua, ikatu emohenda $modal-fade-transform: scale(.8)
.
Ojepe’a pe animación
Umi modal ojehechaukáva simplemente oñedesvanece rangue ojehecha hag̃ua, eipe’a pe .fade
clase nde marcado modal-gui.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Alturas dinámicas rehegua
Peteĩ modal yvatekuépe oñemoambuéramo ojepeꞌa aja, ehenóivaꞌerã myModal.handleUpdate()
emohenda jey hag̃ua modal ñemohenda ojehecharamo peteĩ barra de desplazamiento.
Accesibilidad rehegua
Emoĩ katuete aria-labelledby="..."
, referencia pe título modal rehegua, .modal
. Avei, ikatu eme’ẽ peteĩ ñemombe’u ne ñe’ẽñemi modal rehegua aria-describedby
on ndive .modal
. Eñamindu’u natekotevẽiha remoĩve romoĩma role="dialog"
guive JavaScript rupive.
Oñemoinge umi video YouTube-pegua
Oñemoinge hag̃ua YouTube videokuéra modal-pe oikotevẽ JavaScript adicional ndaha’éiva Bootstrap-pe ojejoko hag̃ua ijeheguiete ñembopu ha hetave mba’e. Ehecha ko kuatiañe’ẽ oipytyvõva Stack Overflow rehegua reikuaave hag̃ua.
Umi tamaño opcional rehegua
Umi modal oguereko mbohapy tuichakue opcional, ojeguerekóva clase modificador rupive oñemoĩ hag̃ua peteĩ .modal-dialog
. Koꞌã tuichakue oike peteĩteĩva punto de ruptura-pe ani hag̃ua ojejapo barra de desplazamiento horizontal umi jehechaukaha ijyvykuꞌivévape.
Tuichakue | Mbo'ehakoty | Modal máx-ancho rehegua |
---|---|---|
Michĩ | .modal-sm |
300px |
Upevakuére | Avave | 500px |
Tuicha | .modal-lg |
800px |
Tuichaiterei mba’e | .modal-xl |
1140px |
Ñande modal por defecto clase modificador’ỹre omoheñói pe modal tamaño “medio”.
<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 rehegua
Ambue ñemboyke haꞌehína opción osẽ hag̃ua peteĩ modal ojahoꞌiva puruhára jehechaukaha, ojeguerekóva umi clase modificador rupive oñemoĩva peteĩ .modal-dialog
.
Mbo'ehakoty | Disponibilidad rehegua |
---|---|
.modal-fullscreen |
Akói |
.modal-fullscreen-sm-down |
Guýpe576px |
.modal-fullscreen-md-down |
Guýpe768px |
.modal-fullscreen-lg-down |
Guýpe992px |
.modal-fullscreen-xl-down |
Guýpe1200px |
.modal-fullscreen-xxl-down |
Guýpe1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass rehegua
Variables rehegua
$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);
Sã
Umi modal pantalla completa ombohováiva ojejapo $breakpoints
mapa ha peteĩ bucle rupive 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);
}
}
}
}
Jeporu rehegua
Pe plugin modal ombohasa ne mba’ekuaarã kañymby ojejeruréramo, umi atributo dato rehegua térã JavaScript rupive. Avei omboyke jepokuaa desplazamiento por defecto ha omoheñói peteĩ .modal-backdrop
omeꞌe hag̃ua peteĩ área clic rehegua oñemboyke hag̃ua umi modal ojehechaukáva ojepyso jave modal okaháre.
Umi atributo de datos rupive
Toggle rehegua
Emombaꞌapo peteĩ modal ehaiꞌeỹre JavaScript. Oñemohenda data-bs-toggle="modal"
peteĩ elemento controlador rehe, peteĩ botón-icha, peteĩ data-bs-target="#foo"
térã href="#foo"
ndive ojepytaso hag̃ua peteĩ modal específico ojere hag̃ua.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Mboyke
Despido ikatu ojehupyty data
atributo reheve peteĩ botón modal ryepýpe ojehechaukaháicha ko’ápe:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
térã peteĩ botón okápe modal-gui oipurúvo pe data-bs-target
ojehechaukaháicha ko’ápe:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
JavaScript rupive
Ejapo peteĩ modal peteĩ línea JavaScript reheve:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Opciones rehegua
Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-bs-
, -peguáicha data-bs-backdrop=""
.
Téra | Hesegua | Upevakuére | Techaukaha |
---|---|---|---|
backdrop |
boolean térã pe vore'static' |
true |
Oike peteĩ elemento modal-telón de fondo rehegua. Ikatu avei, emombeꞌu static peteĩ telón de fondo-pe g̃uarã nombotýiva modal clic-pe. |
keyboard |
booleano rehegua | true |
Omboty modal ojepysóramo tecla escape |
focus |
booleano rehegua | true |
Omoĩ enfoque modal rehe oñepyrũ jave. |
Método-kuéra rehegua
Método ha transición asíncrono rehegua
Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .
Opciones de paso rehegua
Omomba’apo ne contenido modal ramo. Omoneĩ peteĩ opción opcional object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle rehegua
Ombohasa manualmente peteĩ modal. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe modal (heꞌiséva oiko mboyve shown.bs.modal
térã hidden.bs.modal
mbaꞌe ojehúva).
myModal.toggle()
hechauka
Oipe’a manualmente peteĩ modal. Ojevy ohenóivape ojehechauka mboyve añetehápe modal (heꞌiséva oiko mboyve pe shown.bs.modal
mbaꞌe ojehúva).
myModal.show()
Avei, ikatu embohasa peteĩ elemento DOM argumento ramo ikatúva oñembohasa umi evento modal-pe ( relatedTarget
propiedad ramo).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
mongañy
Oñomi manualmente peteĩ modal. Ojevy ohenóivape oñeñomi mboyve añetehápe modal (heꞌiséva oiko mboyve pe hidden.bs.modal
mbaꞌe ojehúva).
myModal.hide()
handleOmbopyahu
Emohenda jey manualmente modal ñemohenda peteĩ modal yvatekuépe oñemoambuéramo ojepeꞌa aja (heꞌiséva ojehecharamo peteĩ barra de desplazamiento).
myModal.handleUpdate()
omboyke haguã
Ombyai peteĩ elemento modal. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)
myModal.dispose()
ohupytyInstancia
Método estático ohejáva ndéve rehupyty hag̃ua instancia modal ojoajúva peteĩ elemento DOM rehe
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
ohupytyTérãEjapoInstancia
Método estático ohejáva ndéve rehupyty instancia modal ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Umi mba’e oikóva
Bootstrap clase modal ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad modal-pe. Opaite mbaꞌe ojehúva modal ojedispara pe modal rehe voi (heꞌiséva pe <div class="modal">
).
Tipo de evento rehegua | Techaukaha |
---|---|
show.bs.modal |
Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave show método instancia rehegua. Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko relatedTarget pe mbaꞌe ojehúva mbaꞌeichaitépa. |
shown.bs.modal |
Ko mbaꞌe ojehúva oñembogue ojejapo rire modal ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jehasaha). Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko relatedTarget pe mbaꞌe ojehúva mbaꞌeichaitépa. |
hide.bs.modal |
Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hide método instancia rehegua. |
hidden.bs.modal |
Ko mbaꞌe ojehúva oñembogue modal oñemokañypa rire puruháragui (ohaꞌarõta CSS jehaipyre oñembotývo). |
hidePrevented.bs.modal |
Ko mbaꞌe ojehúva ojehechauka jave modal, itelón de fondo haꞌehína static ha ojejapo peteĩ clic modal okaháre térã peteĩ tecla escape ojepysóva opción teclado reheve térã data-bs-keyboard oñemohenda false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})