In this tutorial we will be talking about one of the most useful jQuery Bootstrap plugins, The Modal.
Now let’s examine the different parts of Bootstrap’s modal, so we can understand it better.
The Default Modal
The default Bootstrap Modal looks like this:
To trigger the modal, you’ll need to include a link or a button. The markup for the trigger element might look like this:
<a href=”#” class=”btn btn-lg btn-success”
data-target=”#basicModal”>Click to open Modal</a>
Notice the link element has two custom data attributes:
data-target. The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an id of “basicModal” will appear.
Now let’s see the code required to define the modal itself. Here is the markup:
<div class=”modal fade” id=”basicModal” tabindex=”-1″ role=”dialog” aria-labelledby=”basicModal” aria-hidden=”true”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>&times;</button>
<h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
The parent div of the modal should have the same id as used in the trigger element above. In our case it would be
Note: Custom attributes like
aria-hidden in the parent modal element are used for accessibility. It is a good practice to make your website accessible to all, so you should include these attributes since they won’t negatively affect the standard functionality of the modal.
In the modal’s HTML, we can see a wrapper div nested inside the parent modal div. This div has a class of
modal-content that tells bootstrap.js where to look for the contents of the modal. Inside this div, we need to place the three sections I mentioned earlier: the header, body, and footer.
The modal header, as the name implies, is used to give the modal a title and some other elements like the “x” close button. This should have a
data-dismiss attribute that tells Bootstrap which element to hide.
Then we have the modal body, a sibling div of the modal header. Consider the body an open canvas to play with. You can add any kind of data inside the body, including a YouTube video embed, an image, or just about anything else.
Lastly, we have the modal footer. This area is by default right aligned. In this area you could place action buttons like “Save”, “Close”, “Accept”, etc., that are associated with the action the modal is displaying.
Now we are done with our first modal! You can check it out on our demo page.
Changing the Modal’s Size
Continue reading %Understanding Bootstrap Modals%