Bootstrap Tutorial - Bootstrap Dialog

Modals are like dialogs.

It is used to

display dialog prompts
show an alert
show a confirm dialogs
display a larger version of an image
display a long list of terms and conditions
display sign-up/login forms.

With Bootstrap 3, modals have become responsive, which means that they look good and operate well even on smaller screens.

Every modal should have a container with the class modal.

To give a fading effect to the modal we need to add the class fade as well to the same container.

Next, we define a div element that has a class modal-dialog. This is responsible for controlling the size of the modal.

Inside the modal dialog, we'll create a wrapper element that wraps various subsections of a modal.

This wrapper element should have a class called modal-content.

The subsections to the modal are the header, body and footer.

The header and footer part are optional. To create a modal header, you need a div element with class modal-header.

Inside it you can put a modal title and a modal dismiss icon.

The modal title is given using an h4 element with class modal-title.

The dismiss icon here is a multiplication (x) symbol that is wrapped around a button element. This button should have the class close so that it is aligned to the top-left corner of the modal header.

Adding a data-dismiss attribute enables the button to close the modal when clicked.

For the body, we need a div with the class modal-body.

For creating a modal footer, we define a div element that has a class modal-footer.

The content inside a modal footer are right-aligned by default.

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- ww w .j av a 2 s . c om-->
</head>
  <body style='margin:30px'>
     <!-- Modal Handle -->
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch modal
     </button>

      <!-- Modal Markup kept out of all the div elements -->
      <div class="modal fade" id="myModal">
          <div class="modal-dialog">
              <div class="modal-content">
                  <!-- Modal Header -->
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Welcome Back!</h4>
                  </div>
                  <!-- Modal Body -->
                  <div class="modal-body">
                      <h1>Hello Readers!</h1>
                  </div>
                  <!-- Modal Footer -->
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

Click to view the demo

Dialog Size

Modals come in three widths: large, default, and small.

If no additional class is provided to modal-dialog, it will appear in the default width of 600p.

To make the modal large or small, you need to add one of these classes to the modal-dialog element:

modal-lg: for a large modal of width 900px
modal-sm: for a small modal of width 300px

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{<!--from www . j a  v  a2  s.c o  m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Large modal -->
  <button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Large modal</button>
 
    <div id="largeModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <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">Large Modal</h4>
                </div>
                <div class="modal-body">
                    <p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
     
    <!-- Small modal -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Small modal</button>
     
    <div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <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">Small Modal</h4>
                </div>
                <div class="modal-body">
                    <p>Add the <code>.modal-sm</code> class on <code>.modal-dialog</code> to create this small modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Show dialog with Javascript

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){<!-- ww  w .ja  va 2s  .  c o m-->
    $("#myModal").modal('show');
  });
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Changing Modal Content on Trigger Button

The following example shows how to change the title of the modal window according to the trigger button's data-title attribute value.

<!--from  w  w w.  ja  v a 2 s  .c  o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myModal").on('show.bs.modal', function(event){
        var button = $(event.relatedTarget);  // Button that triggered the modal
        var titleData = button.data('title'); // Extract value from data-* attributes
        $(this).find('.modal-title').text(titleData + ' Form');
    });
});
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Feedback">Feedback</button>
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Report Error">Report Error</button>
    <button type="button" class="btn btn-primary" 
    data-toggle="modal" data-target="#myModal" data-title="Contact Us">Contact Us</button>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Modal Window</h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Email:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">Message:</label>
                            &lt;textarea class="form-control" id="message-text"&gt;&lt;/textarea&gt;
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>

Click to view the demo

Options

There are options which can be passed to modal() method to customize the modal window.

Name	Type	Default Value	Description
backdrop	boolean or the string `'static'`	true	Includes a modal-backdrop element. Alternatively, you may specify `static` for a backdrop which doesn't close the modal on click.
keyboard	boolean	true	Closes the modal window on press of escape key.
show	boolean	true	Shows the modal when initialized or activate.

.modal(options)

This method activates your content as a modal.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--   w  ww .j a v  a  2 s.c o m-->
  $('.launch-modal').click(function(){
    $('#myModal').modal({
      keyboard: true
    });
  });
});
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>Test.</small></p>
                    <p class="text-info"><small><strong>Note:</strong> 
                    Press Tab key on the keyboard to enter inside the 
                    modal window after that press the Esc key.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

.modal('toggle')

This method toggles a modal window manually.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--   ww  w. ja v a 2s  .c om-->
  $('.toggle-modal').click(function(){
    $('#myModal').modal('toggle');
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.toggle-modal {
  width: 200px;
  position: absolute;
  margin: 0 auto;
  z-index: 9999;
  bottom: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
  <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary toggle-modal" value="Toggle Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
      <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">Confirmation</h4>
          </div>
          <div class="modal-body">
            <p>This is a test?</p>
            <p class="text-warning"><small>This is atest.</small></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

Click to view the demo

.modal('show')

This method can be used to open a modal window manually.

<!--from  w  w w . j  ava2  s .  com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.open-modal').click(function(){
    $('#myModal').modal('show');
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.open-modal{
  width: 200px;
  position: absolute;
  margin: 0 auto;
  top: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

.modal('hide')

This method can be used to hide a modal window manually.

<!--from w  w w. j  a v  a2s . co  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myModal").modal('show');
  $('.hide-modal').click(function(){
    $('#myModal').modal('hide');
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.hide-modal {
    width: 200px;
  position: absolute;
  margin: 0 auto;
  right: 0;
  left: 0;
    bottom: 20px;
  z-index: 9999;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary hide-modal" value="Hide Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Events

Bootstrap's modal class includes few events for hooking into modal functionality.

Event	Description
show.bs.modal	fires when the show instance method is called.
shown.bs.modal	fired when the modal has been made visible to the user. It will wait until the CSS transition process has been fully completed.
hide.bs.modal	fired when the hide instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user. It will wait until the CSS transition process has been fully completed.

The following example displays a log message when fade out transition of the modal window has been fully completed.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w  w w .ja  v  a2  s .  com-->
  $('.open-modal').click(function(){
    $('#myModal').modal('show');
  });
    $("#myModal").on('hidden.bs.modal', function(){
    console.log("Modal window has been completely closed.");
  });
});
</script>
<style type="text/css">
.bs-example{
  margin: 20px;
}
.open-modal{
  position: absolute;
  margin: 0 auto;
  top: 20px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary open-modal" value="Show Demo Modal">

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>This is a test?</p>
                    <p class="text-warning"><small>This is a test.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo