Bootstrap Tutorial

Add some text here
Close
Submit changes
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 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:
o The first is .modal, which is simply identifying the content of the as a modal.
o 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).
, 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.
Options
There are certain options which can be passed via data attributes or JavaScript to customize the look and feel of
the Modal Window. Following table lists the options:
TUTORIALS POINT
Simply Easy Learning