Bootstrap Modal Plugin is just like an overlay div or you can say it a child window. The purpose of model is without leaving the current or parent window to display the content from other source. That information, interaction and more things can provide this child window.
If you want to implement functionality of this plugin individually, simple include the modal.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
You can toggle the modal plugin’s hidden content via data attributes and via javascript
Via data attributes
Set attribute data-toggle=”modal” on a controller element, like a button or link, along with a data-target=”#identifier” or href=”#identifier” to target a specific modal (with the id=”identifier”) to toggle.
<button type="button" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
Via JavaScript
You can call a modal with id="myModal" with a single line of JavaScript using this technique.
$('#myModal).modal(options)
Details of the preceding code:
To invoke the modal window, you need to have some kind of a trigger. You can use a button or a link. Here we have used button.
If you look in the code above, you will see that in the <button> tag, the data-target="#myModal" is the target of the modal that you want to load on the page. This code allows you to create multiple modals on the page and then have different triggers for
each of them. Now, to be clear, you don’t load multiple modals at the same time, but you can create many on the page to be loaded at different times.There are two classes to take note of in the modal:
The first is .modal, which is simply identifying the content of the <div> as a modal.
And second is the .fade class. When the modal is toggled, it will cause the content to fade in and out.
aria-labelledby="myModalLabel", attribute reference the modal title.
The attribute aria-hidden="true" is used to keep the Modal Window invisible till a trigger comes (like a click on the associated button).
<div class="modal-header">, modal-header is the class to define style for the header of the modal window.
class="close", is a CSS class close that sets style for the Close button of the modal window.
data-dismiss="modal", is a custom HTML5 data attribute. Here it is used to close the modal window.
class="modal-body", is a CSS class of Bootstrap CSS to set style for body of the modal window.
class="modal-footer", is a CSS class of Bootstrap CSS to set style for footer of the modal window.
data-toggle="modal", HTML5 custom data attribute data-toggle is used to open the modal window.
Static Example
A rendered modal with header, body, and set of actions in the footer.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Live example with transition
A static modal window example with transition is as shown in the following example:
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
Optional sizes
Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.
<!-- Large modal -->
<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>
</div>
</div>
<!-- Small modal -->
<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>
</div>
</div>
Remove animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>
Options
Modal plugin has some options which can be passed via data attributes or JavaScript to modify the face of Modal Window. Below we are listing options in table:
| Option Name | Type/Default Value | Default | Description |
|---|---|---|---|
| backdrop | boolean or the string ‘static’ | true | If you do not requirement to close the modal when click outside the modal, specify static for backdrop. |
| keyboard | boolean | true | Closes the modal when escape key is pressed |
| show | boolean | true | Shows the modal when initialized. |
| remote | path | true | Insert content into the model body .modal-content div using .load method of jQuery. If a remote and valid url add in href attribute, content will be loaded there. An example of this is shown below: <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> |
Methods
Options: .modal(options)
Trigger you content as a modal with some useful methods which can be used with modal().
$('#myModal').modal(
keyboard: false
)Toggle: .modal(‘toggle’)
Manually toggles a modal
$('#myModal').modal('toggle')Show: .modal(‘show’)
Manually opens a modal
$('#myModal').modal('show')Hide: .modal(‘hide’)
Manually hides a modal
$('#myModal').modal('hide')Example
The following example demonstrates the usage of methods:
<h2>Example of using methods of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Press ESC button to exit.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () $('#myModal').modal(
keyboard: true
));
</script>
Just click the Close button to exit the modal window.
Events
Below the description of events is listed which hooking into modal functionality.
show.bs.modal
Triggered after the show method is called.
$('#myModal).on('show.bs.modal', function ()
// do something…
)shown.bs.modal
Triggered when the modal has been made visible to the user (will wait for CSS transitions to complete).
$('#myModal).on('shown.bs.modal', function ()
// do something…
)hide.bs.modal
Triggered when the hide instance method has been called.
$('#myModal).on('hide.bs.modal', function ()
// do something…
)hidden.bs.modal
Triggered when the modal has finished being hidden from the user.
$('#myModal).on('hidden.bs.modal', function ()
// do something…
)
Example
The following example shows the usage of events:
<h2>Example of using events of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Click on close button to check Event functionality.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () $('#myModal').modal('hide'))});
</script>
<script>
$(function () $('#myModal').on('hide.bs.modal', function ()
alert('Hey, I heard you like modals...');)
);
</script>
Like seen in the above demo, after click on the Close button i.e. hide event, an alert message is displayed.
Bootstrap Modal Plugin
No comments:
Post a Comment