BootstrapJS Modal
JS Modal (modal.js)
The Modal plugin is a dialog box/popup window that is displayed on top of the current page.
For a tutorial about Modals, read ourBootstrap Modal Tutorial.
The Modal Plugin Classes
| Class | Description |
|---|---|
| .modal | Creates a modal |
| .modal-content | Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer. |
| .modal-header | Defines the style for the header of the modal |
| .modal-body | Defines the style for the body of the modal |
| .modal-footer | Defines the style for the footer in the modal.Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left|center |
| .modal-sm | Specifies a small modal |
| .modal-lg | Specifies a large modal |
| .fade | Adds an animation/transition effect which fades the modal in and out |
Trigger the Modal Via data-* Attributes
Adddata-toggle="modal" anddata-target="#modalID" to any element.
Note: For<a> elements, omitdata-target, and usehref="#modalID" instead:
Example
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
Try it Yourself »<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
Trigger Via JavaScript
Enable manually with:
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 | Try it |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Specifies whether the modal should have a dark overlay:
If you specify the value "static", it is not possible to close the modal when clicking outside of it | Using JSUsing data |
| keyboard | boolean | true | Specifies whether the modal can be closed with the escape key (Esc):
| Using JSUsing data |
| show | boolean | true | Specifies whether to show the modal when initialized | Using JSUsing data |
Modal Methods
The following table lists all available modal methods.
| Method | Description | Try it |
|---|---|---|
| .modal(options) | Activates the content as a modal. See options above for valid values | Try it |
| .modal("toggle") | Toggles the modal | Try it |
| .modal("show") | Opens the modal | Try it |
| .modal("hide") | Hides the modal | Try it |
Modal Events
The following table lists all available modal events.
| Event | Description | Try it |
|---|---|---|
| show.bs.modal | Occurs when the modal is about to be shown | Try it |
| shown.bs.modal | Occurs when the modal is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.modal | Occurs when the modal is about to be hidden | Try it |
| hidden.bs.modal | Occurs when the modal is fully hidden (after CSS transitions have completed) | Try it |
More Examples
Login Modal
The following example creates a modal for login:
Example
<div>
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button">Login</button>
<!-- Modal -->
<div role="dialog">
<div>
<!-- Modal content-->
<div>
<div>
<button type="button" data-dismiss="modal">×</button>
<h4><span></span> Login</h4>
</div>
<div>
<form role="form">
<div>
<label for="usrname"><span></span> Username</label>
<input type="text" placeholder="Enter email">
</div>
<div>
<label for="psw"><span></span> Password</label>
<input type="text" placeholder="Enter password">
</div>
<div>
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit"><span></span> Login</button>
</form>
</div>
<div>
<button type="submit" data-dismiss="modal"><span></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
Try it Yourself »<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button">Login</button>
<!-- Modal -->
<div role="dialog">
<div>
<!-- Modal content-->
<div>
<div>
<button type="button" data-dismiss="modal">×</button>
<h4><span></span> Login</h4>
</div>
<div>
<form role="form">
<div>
<label for="usrname"><span></span> Username</label>
<input type="text" placeholder="Enter email">
</div>
<div>
<label for="psw"><span></span> Password</label>
<input type="text" placeholder="Enter password">
</div>
<div>
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit"><span></span> Login</button>
</form>
</div>
<div>
<button type="submit" data-dismiss="modal"><span></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
