Dojo modals should be used to accomplish tasks that must be completed before a user can continue. Taken almost verbatim from Bootstrap modals.
Modals must follow a structure as indicated below.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ki-x"></span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#example_modal">
Launch demo modal
</button>
<div class="modal fade" id="example_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ki-x"></span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ki-x"></span></button>
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
<p>…</p>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ki-x"></span></button>
<h4 class="modal-title">Small modal</h4>
</div>
<div class="modal-body">
<p>…</p>
</div>
</div>
</div>
</div>
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open
to the <body>
to override default scrolling behavior and generates a .modal-backdrop
to provide a click area for dismissing shown modals when clicking outside the modal.
Activate a modal without writing JavaScript. Set data-toggle="modal"
on a controller element, like a button, along with a data-target="#foo"
or href="#foo"
to target a specific modal to toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Call a modal with id myModal
with a single line of JavaScript:
$('#myModal').modal(options)
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-backdrop=""
.
Name | type | default | description |
---|---|---|---|
backdrop | boolean or the string 'static' |
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
keyboard | boolean | true | Closes the modal when escape key is pressed |
show | boolean | true | Shows the modal when initialized. |
Activates your content as a modal. Accepts an optional options object.
$('#myModal').modal({
keyboard: false
})
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
$('#myModal').modal('toggle')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
$('#myModal').modal('show')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
$('#myModal').modal('hide')
Readjusts the modal’s positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.
Only needed when the height of the modal changes while it is open.
$('#myModal').modal('handleUpdate')
Bootstrap’s modal class exposes a few events for hooking into modal functionality.
All modal events are fired at the modal itself (i.e. at the <div class="modal">
).
Event Type | Description |
---|---|
show.bs.modal | This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
shown.bs.modal | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
hide.bs.modal | This event is fired immediately when the hide instance method has been called. |
hidden.bs.modal | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
loaded.bs.modal | This event is fired when the modal has loaded content using the remote option. |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})