Bootstrap - Modal Plugin | Adglob Infosystem Pvt Ltd

In this guide, we will discuss Modal plugin in Bootstrap. A 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.

If you want to include this plugin functionality individually, then you will need modal.js. Else, as mentioned in the chapter Bootstrap Plugins 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 − 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)

Example

A static modal window example is 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">
                  &times;
            </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-dialog -->
  
</div><!-- /.modal -->

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 a 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 pages 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.

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 −

Option Name	Type/Default Value	Data attribute name	Description
backdrop	boolean or the string ‘static’ Default: true	data-backdrop	Specify static for a backdrop, if you don’t want the modal to be closed when the user clicks outside of the modal.
keyboard	boolean Default: true	data-keyboard	Closes the modal when escape key is pressed; set to false to disable.
show	boolean Default: true	data-show	Shows the modal when initialized.
remote	path Default: false	data-remote	Using the jQuery .load method, inject content into the modal body. If an href with a valid URL is added, it will load that content. An example of this is shown below −<a data-toggle = “modal” href = “remote.html” data-target = “#modal”>Click me</a>

Methods

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

Method	Description	Example
Options − .modal(options)	Activates your content as a modal. Accepts an optional options object.	$(‘#identifier’).modal({ keyboard: false })
Toggle − .modal(‘toggle’)	Manually toggles a modal.	$(‘#identifier’).modal(‘toggle’)
Show − .modal(‘show’)	Manually opens a modal.	$(‘#identifier’).modal(‘show’)
Hide − .modal(‘hide’)	Manually hides a modal.	$(‘#identifier’).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 Esc button and the modal window exits.

Events

Following table lists the events to work with modal. These events may be used to hook into the function.

Event	Description	Example
show.bs.modal	Fired after the show method is called.	$(‘#identifier’).on(‘show.bs.modal’, function () { // do something… })
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 () { // do something… })
hide.bs.modal	Fired when the hide instance method has been called.	$(‘#identifier’).on(‘hide.bs.modal’, function () { // do something… })
hidden.bs.modal	Fired when the modal has finished being hidden from the user.	$(‘#identifier’).on(‘hidden.bs.modal’, function () { // do something… })

Example

The following example demonstrates 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>

As seen in the above screen, if you click on the Close button i.e hide event, an alert message is displayed.

Next Topic : Click Here