Subscribe via RSS Feed

Bootstrap Modal

June 6, 2014 1 Comment

A bootstrap modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.

Usage
We can toggle the modal plugin’s hidden content:

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.

Via JavaScript: Using this technique you can call a modal with id=”identifier” with a single line of JavaScript:

$('#identifier').modal(options)

As we have now figgured out what modal is. Let us look through a certain line of codes for better understanding.

<!DOCTYPE html>
<html>
<head>
   <title>Try Bootstrap Online</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h2>Creating Modals with Bootstrap</h2>
<!-- This is the button to trigger the 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">
               Add Modal title<br />
               <input type="text">
            </h4>
         </div>
         <div class="modal-body">
         Add text below<br />
            <textarea name="textarea" style="width:250px;height:150px;"></textarea>
         </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>
</div>
<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>
</body>
</html>

modal

Details of the preceding code:
To invoke the modal window, we need to have some kind of a trigger. We can use a button or a link. Here we have used button.

If we look in the code above, we will see that in the <button> tag, the data-target=”#myModal” is the target of the modal that we want to load on the page. This code allows us to create multiple modals on the page and then have different triggers for each of them. Now, to be clear, we don’t load multiple modals at the same time, but we 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.
<input> tag is used to create a single line textbox where user can add title. Whereas <textarea> is used for multiline textbox for adding text.
There is also a interesting feature in the above code to. And that is to use Esc key in the keyboard to close the modal. To achive this feature we have to use a set of javascript coding. Which will enable the keyboard property.

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Sign Up to read the rest of the content

Email will be used only for updates of our site

No Thanks