Table Of Content

Bootstrap Models Tutorial

View more Tutorials:

1- Bootstrap Model

Model means a  Dialog or a  Popup. It displays over all other contents of current page. The purpose of the  Model is to notify to users of something of applications or wait for users to enter information.
Although  Javascript supports some different  dialogs such as  Confirm, Alert, Open File, Save file,..but obviously, these  dialogs can not be customized, and so you expect something better.
First, look at an example:
model-example1.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Model Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <!-- Button to Open the Modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
           Open modal
      </button>

      <!-- The Modal -->
      <div class="modal" id="myModal">
         <div class="modal-dialog">
            <div class="modal-content">
               <!-- Modal Header -->
               <div class="modal-header">
                  <h4 class="modal-title">Modal Heading</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
               </div>
               <!-- Modal body -->
               <div class="modal-body">
                  Modal body..
               </div>
               <!-- Modal footer -->
               <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
  
</html>
Below is the structures of a model. The div.model-content element is the place where you are interested in. It consists of three zones: Header, Body & Footer, and you can customize it in all such three zones.
Model Attributes
<div class="modal" id="myModal"
   data-backdrop="static"
   data-keyboard="false"
   tabindex="-1"
   aria-labelledby="myModalLabel"
   aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <!-- Modal body -->
         <div class="modal-body">
            Modal body..
         </div>
         <!-- Modal footer -->
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
Attribute Description
data-backdrop This attribute has two values such as true or static. By default, it is true, which means that the user can click on the background to close the Model.
data-keyboard This attribute has two values such as true or  false, defaulted as false. If it is true, the user can close the Model by pressing ESC.
aria-labelledby The attribute of HTML5
aria-hidden The attribute of​​​​​​​  HTML5
The  .fade class allows you to create effects when the Model hides or displays
.fade
<div class="modal fade" id="myModal">
   <div class="modal-dialog">
      <div class="modal-content">
        
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
        
         <div class="modal-body">
            Modal body..
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
Example: create a  Model not containing   "X" (Found at the top right corner of the Model.)
Model without X button
<div class="modal" id="myModal">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
         </div>
         <div class="modal-body">
            Modal body..
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

2- Model & jQuery

You can use  JQuery to interact with the  Model, for instance, hide or display the  Model.
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Or fuller:
$('#myModal').modal(options);

// Example:

var options = {
  'backdrop' : 'static',
  'keyboard' : true,
  'show' : true,
  'focus' : false
}
Option Description
backdrop This option has two values: true or static, defaulted as true, which means that the user can click on the background to close the Model.
keyboard This option has two values: true or false, defaulted as false. If it is true, the user can close the Model by pressing ESC.
show This option has two values: true or false, used to display or hide the Model.
focus This option has two values: true or false, defaulted as  false. If it is true, the Model will be focused when it is created.

3- Model Events

Some events are fired when the  Model opens or closes. And you can catch these events to do something. Use the   "on" method of the  jQuery to bind the event with the handler.
Event Description
show.bs.modal This event is fired immediately before the Model displays.
shown.bs.modal This event is fired immediately after the Model displays.
hide.bs.modal This event is fired immediately before the Model is hidden
hidden.bs.modal This event is fired immediately after the Model is hidden
You can handle one of the above events like below:
$('#myModel').on('shown.bs.modal', function (e) {
  alert('Modal is successfully shown!');
});

View more Tutorials: