Modal
Utere Bootstrap's JavaScript modalis plugin ad addere dialogs ad locum tuum pro lightboxes, notificationes usuario, vel omnino contenta consuetudine.
Quomodo facitur
Priusquam incepit cum Bootstrap modulatione modali, scito sequentia legere, sicut nostrae tabulae optiones nuper mutatae sunt.
- Modales aedificantur cum HTML, CSS, et JavaScript. Super omnia alia in scriptione positi sunt et librum removent
<body>
ut potius cartis modalibus contentorum. - Clicking in modalis "backdrop" automatice claudet modalem.
- Bootstrap tantum sustinet unam fenestram modalem ad tempus. Modales nidificati non sustinentur ut credamus eas experientias usoris pauperes esse.
- Modalis usus
position: fixed
, qui aliquantulum de suo reddendo esse interdum potest. Quotiens fieri potest, pone modalem HTML in summo gradu, ne potentiale impedimentum ab aliis elementis fiat. Verisimile erit exitus incurrere cum.modal
intra aliud fixum elementum nidificans. - Iterum, propter
position: fixed
aliquas cautiones cum modalibus in mobilibus machinis utendo. Vide navigatrum subsidium soUicitudo pro details. - Ob quam HTML5 sua semantica definit, attributio
autofocus
HTML effectum in modalibus Bootstrap non habet. Ad eundem effectum assequendum, utere aliqua consuetudine JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
interrogatione instrumentorum. Videre
motum sectionem accessibilitatis nostrae documentationis reductam .
Demos legere et usus guidelines serva.
Exempla
Modal components
Infra exemplum modalis staticposition
(est eius significatio et display
vexata). Inclusa sunt caput modalis, corpus modale (requiritur ad padding
) et footer modalis (libitum). Rogamus ut includas capitis modales actiones dimissionis quoties fieri potest, vel aliam explicitam dimissionem praebere.
<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>
Vivamus demo
Toggle operantes demo modalem pyga infra strepitando. A summo paginae labatur et deficiet.
<!-- 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>
Static backdrop
Cum gutta static adponitur, modalis extra illud strepitando non claudet. Infra ipsum preme experior.
<!-- 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>
Scrolling diu contentus
Cum modales nimis longiores fiunt ad prospectum seu machinam usoris, ipsi paginae ipsius independentes sunt. Conare demo inferius videre quid velis.
.modal-dialog-scrollable
Potes etiam facere librum modalem modalem qui librum corporis modalis admittit addendo .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertically sitas
Adde .modal-dialog-centered
ad .modal-dialog
verticaliter centrum modalem.
<!-- 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>
Instrumentorum et popovers
Instrumenta et popoveri intra modales prout opus est poni possunt. Cum modalia clausa sint, instrumenta quaevis instrumenta et popoveri intus ipso facto dimittuntur.
<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>
Usus malesuada euismod
Utilise Bootstrap ratio gridis in modali .container-fluid
intra nidificando .modal-body
. Tum utere normali eget systematis classes sicut alibi vis.
<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>
Varius contentus modalis
Habere fasciculum globuli omnes felis eundem modalem cum contentis leviter diversis? Usus event.relatedTarget
et HTML data-*
attributa (forte per jQuery ) variare contenta modalis pendentibus quibus pyga premebatur.
Infra est demo viva exemplum HTML et JavaScript. Pro magis informationes, lege modales eventus docs pro details de 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)
})
Mutare animationem
Variabilis $modal-fade-transform
statum transformationem determinat .modal-dialog
ante modu defluxionis in animatione, $modal-show-transform
variabilis transformationem determinat in .modal-dialog
fine modu flexae in animationis.
Si exempli gratia vis zoom-in animante, potes ponere $modal-fade-transform: scale(.8)
.
Aufer animationem
Modales enim, qui simpliciter apparent potius quam in conspectum decident, .fade
genus e charactere modali removent.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynamic iuga
Si altitudo modalis mutationum cum aperta est, vocare debes $('#myModal').modal('handleUpdate')
ad componendum locum modalis in casu scrollbar quod apparet.
Accessibility
Adde scito aria-labelledby="..."
, referens titulum modalem , ad .modal
. Accedit, quod descriptionem dialogi modalis tui cum aria-describedby
on .modal
. Nota te non opus addere role="dialog"
cum iam per JavaScript.
Embedding YouTube videos
Embedding YouTube videos in modalibus additional JavaScript non requirit in Bootstrap ut automatice playback prohibere et magis. Vide hoc utile Stack superfluum post pro magis notitia.
Moles libitum
Modales tres magnitudinum ad libitum habent, in promptu per modifier classes ponendas .modal-dialog
. Hae magnitudines calcitrare in quibusdam confractionibus ad vitandarum schedulae horizontales in prospectibus angustioribus.
Magnitudo | Classis | Modal max-latitudo |
---|---|---|
Parvus | .modal-sm |
300px |
Default | Nullus | 500px |
Magna | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
Nostrum defaltum modalis sine determinatione classis constituit magnitudinem modalem "medii".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Consuetudinem
Plugin modalis toggles tuas absconditas in demanda, per data attributa vel JavaScript. Etiam addit .modal-open
ad <body>
mores scrolling delendi et generat .modal-backdrop
ad providendum strepitam aream ad dimittendum modales ostensos cum extra modales strepitando.
Via data attributa
Modalis eu sine scripto JavaScript. Pone data-toggle="modal"
in elementum moderatoris, ut puga pyga, una cum a data-target="#foo"
vel href="#foo"
ut scopum modalem specificum toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Via JavaScript
Id cum modali voca myModal
una linea JavaScript:
$('#myModal').modal(options)
Optiones
Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-
, ut in data-backdrop=""
.
Nomen | Type | Default | Descriptio |
---|---|---|---|
backdrop | Boolean vel filum'static' |
verum | Includes elementum modal-backdrop. Vel, specificare static pro exo- ram quod non claudit modalem in strepita. |
tincidunt | Boolean | verum | Modalis claudit cum clavis effugium premitur |
focus | Boolean | verum | Focum ponit in modali cum initialized. |
ostende | Boolean | verum | Modalem ostendit cum initialized. |
Methodi
Modi asynchronous et transitus
Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .
.modal(options)
Exagitat tuam contentus modalem. Acceptat optiones libitum object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Manually toggles modalis. Redit ad RECENS antequam modalis actu ostensum est vel absconditum (id est ante shown.bs.modal
vel hidden.bs.modal
eventum).
$('#myModal').modal('toggle')
.modal('show')
Manually modal opens. RECENS REcurrit antequam modalis actu ostensum est (id antequam shown.bs.modal
evenit).
$('#myModal').modal('show')
.modal('hide')
Manually celat modalis. Redit ad RECENS antequam modalis actu absconditus est (id antequam hidden.bs.modal
evenit).
$('#myModal').modal('hide')
.modal('handleUpdate')
Manually statum modalis legitimum, si altitudo modalis mutationum dum aperta est (ie in casu scrollbar apparet).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Modalis elementum destruit.
Events
Classis modalis Bootstrap paucas eventus exponit pro hamo in functionem modalem. Omnes eventus modales accenduntur ad ipsum modalem (id est ad <div class="modal">
).
Event Type | Descriptio |
---|---|
show.bs.modal | Huius rei accendit statim cum show instantia methodus appellatur. Si causatur per strepita, elementum clicked praesto est ut relatedTarget proprietas eventus. |
shown.bs.modal | Eventus hic accensus est cum modalis utenti visibilia facta est (exspectabit CSS transitus ad perficiendum). Si causatur per strepita, elementum clicked praesto est ut relatedTarget proprietas eventus. |
hide.bs.modal | Hic eventus statim accensus est, cum hide methodus instantia vocata est. |
hidden.bs.modal | Eventus hic accensus est cum modalis occultationem ab usore confecit (exspectabit CSS transitus ad perficiendum). |
hidePrevented.bs.modal | Hic eventus accenditur cum modalis ostenditur, eius backdros est static et strepita extra modalem vel effugium preli clavis cum optione claviaturae vel data-keyboard ad posito perficitur false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})