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

<!-- 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">
            <h4 class = "modal-title" id = "myModalLabel">
               Modal title
         <div class = "modal-body">
            Body text here
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
            <button type = "button" class = "btn btn-primary">
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->  
</div><!-- /.modal -->




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




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

  1.  Options − .modal(options) – Activates content as a modal.
       keyboard: false
  2. Toggle − .modal(‘toggle’)
  3. Show − .modal(‘show’)
  4. Hide − .modal(‘hide’)


Following table lists the events to work with modal.

  1. – Fired after the show method is called.
    $('#identifier').on('', function () {
       // action ...
  2. –  Fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
    $('#identifier').on('', function () {
       // action ...
  3. – Fired when the hide instance method has been called.
    $('#identifier').on('', function () {
       // action ...
  4. – Fired when the modal has finished being hidden from the user.
    $('#identifier').on('', function () {
       // action ...

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

Leave a Reply

Your email address will not be published.