Bootstrap Modal Plugin

A modal is a child window that pop up over parent window. The purpose is to display content from a separate source without leaving the parent window. In case to make Modal Plugin work properly you will need  bootstrap.js or  bootstrap.min.js.

How to use Bootstrap Modal Plugin?

Using 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.

data-target = “#myModal” is the target of the modal that you want to load on the page.

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.

The attribute aria-hidden = “true” is used to keep the Modal Window invisible till a trigger comes

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.

<!-- 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">
                  &times;
            </button>           
            <h4 class = "modal-title" id = "myModalLabel">
               Modal title
            </h4>
         </div>        
         <div class = "modal-body">
            Body 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 
            </button>
         </div>         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->  
</div><!-- /.modal -->

 

Launch demo modal

 

 

Using JavaScript − Using this technique you can call a modal with id = “identifier”:

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

 

Methods

Here are some useful methods that can be used with modal().

1.  Options − .modal(options) – Activates content as a modal.

   $('#identifier').modal({
      keyboard: false
   })
   

2. Toggle − .modal(‘toggle’)

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

3. Show − .modal(‘show’)

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

4. Hide − .modal(‘hide’)

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

Events

Following table lists the events to work with modal.

1. show.bs.modal – Fired after the show method is called.

   $('#identifier').on('show.bs.modal', function () {
      // action ...
   })
   

2. shown.bs.modal –  Fired when the modal has been made visible to the user (will wait for CSS transitions to complete).

   $('#identifier').on('shown.bs.modal', function () {
      // action ...
   })
   

3. hide.bs.modal – Fired when the hide instance method has been called.

   $('#identifier').on('hide.bs.modal', function () {
      // action ...
   })
   

4. hidden.bs.modal – Fired when the modal has finished being hidden from the user.

   $('#identifier').on('hidden.bs.modal', function () {
      // action ...
   })
   

Bootstrap Modal plugin could be useful in complicated form with different parameters like additional option for input submission.

Modal Login Demo