Modal - Dojo Bootstrap

Usage

Via data attributes

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>

Via JavaScript

Call a modal with id myModal with a single line of JavaScript.

Activates your content as a modal. Accepts an optional options object.

query('#myModal').modal(options)

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	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.
remote	path	false	If a remote url is provided, content will be loaded via jQuery's `load` method and injected into the `.modal-body`. If you're using the data api, you may alternatively use the `href` tag to specify the remote source. An example of this is shown below: `<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>`

Methods

Method	Description
hide	Hides a modal.
show	Shows a modal.
toggle	Toggles a modal.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

Event	Description
show	This event fires immediately when the `show` instance method is called.
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide	This event is fired immediately when the `hide` instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

query('#myModal').on('hidden', function () {
    // do something…
})

Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Static example

A rendered modal with header, body, and set of actions in the footer.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Launch demo modal

<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>