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ĩ.modalambue 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
autofocusmodal Bootstrap-pe. Ojehupyty hag̃ua peteĩchagua efecto, eipuru peteĩ JavaScript jeporupyre:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motionconsulta 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 displayoñ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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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 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-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">×</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 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-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">×</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>
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-centereda .modal-dialogoñ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-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-fluidryepý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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-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.relatedTargetha HTML data-*atributo (ikatu jQuery rupive ) emoambue hag̃ua modal mbaꞌekuaarã ojesarekó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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Omoambue animación
Pe $modal-fade-transformmbaꞌekuaarã ohechakuaa mbaꞌeichaitépa oñembohasa .modal-dialogpe animación modal fade-in mboyve, pe $modal-show-transformmbaꞌekuaarã ohechakuaa pe transformada de .modal-dialogopakué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 .fadeclase 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').modal('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-describedbyon 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>
Jeporu rehegua
Pe plugin modal ombohasa ne mba’ekuaarã kañymby ojejeruréramo, umi atributo dato rehegua térã JavaScript rupive. Avei omoĩve .modal-openpe <body>to override desplazamiento comportamiento por defecto ha omoheñói peteĩ .modal-backdropomeꞌ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
Emombaꞌapo peteĩ modal ehaiꞌeỹre JavaScript. Oñemohenda data-toggle="modal"peteĩ elemento controlador rehe, peteĩ botón-icha, peteĩ data-target="#foo"térã href="#foo"ndive ojepytaso hag̃ua peteĩ modal específico ojere hag̃ua.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScript rupive
Ehenói peteĩ modal orekóva id myModalpeteĩ línea JavaScript reheve:
$('#myModal').modal(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-, -peguáicha data-backdrop="".
| Téra | Hesegua | Upevakuére | Techaukaha |
|---|---|---|---|
| telón de fondo rehegua | boolean térã pe vore'static' |
teete | Oike peteĩ elemento modal-telón de fondo rehegua. Ikatu avei, emombeꞌu staticpeteĩ telón de fondo-pe g̃uarã nombotýiva modal clic-pe. |
| teclado rehegua | booleano rehegua | teete | Omboty modal ojepysóramo tecla escape |
| jesareko renda | booleano rehegua | teete | Omoĩ enfoque modal rehe oñepyrũ jave. |
| hechauka | booleano rehegua | teete | Ohechauka modal 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 .
.modal(options)
Omomba’apo ne contenido modal ramo. Omoneĩ peteĩ opción opcional object.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
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.modaltérã hidden.bs.modalmbaꞌe ojehúva).
$('#myModal').modal('toggle')
.modal('show')
Oipe’a manualmente peteĩ modal. Ojevy ohenóivape ojehechauka mboyve añetehápe modal (heꞌiséva oiko mboyve pe shown.bs.modalmbaꞌe ojehúva).
$('#myModal').modal('show')
.modal('hide')
Oñomi manualmente peteĩ modal. Ojevy ohenóivape oñeñomi mboyve añetehápe modal (heꞌiséva oiko mboyve pe hidden.bs.modalmbaꞌe ojehúva).
$('#myModal').modal('hide')
.modal('handleUpdate')
Emohenda jey manualmente modal ñemohenda peteĩ modal yvatekuépe oñemoambuéramo ojepeꞌa aja (heꞌiséva ojehecharamo peteĩ barra de desplazamiento).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Ombyai peteĩ elemento modal.
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 |
|---|---|
| ohechauka.bs.modal | Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua. Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko relatedTargetpe mbaꞌe ojehúva mbaꞌeichaitépa. |
| ojehechauka.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 relatedTargetpe mbaꞌe ojehúva mbaꞌeichaitépa. |
| omokañy.bs.modal | Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua. |
| kañymby.bs.modal | Ko mbaꞌe ojehúva oñembogue modal oñemokañypa rire puruháragui (ohaꞌarõta CSS jehaipyre oñembotývo). |
| omokañyOjejokóva.bs.modal | Ko mbaꞌe ojehúva ojehechauka jave modal, itelón de fondo haꞌehína staticha ojejapo peteĩ clic modal okaháre térã peteĩ tecla escape ojepysóva opción teclado reheve térã data-keyboardoñemohenda false. |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})