Post
Ask Question

How To Create Modal Dialog In Bootstrap 4

Introduction

This article will demonstrate you modal dialogs in bootstrap 4. The Modal component is a dialog box/popup window that is displayed on top of the current page.

Important points to be remember before using bootstrap 4 modal dialogs.

  1. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  2. Clicking on the modal “backdrop” will automatically close the modal.
  3. Bootstrap only supports one modal window at a time. Nested modals aren’t supported.
  4. Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
  5. Once again, due to position: fixed, there are some caveats with using modals on mobile devices.
  6. Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals.

To achieve autofocus effect, use some custom JavaScript,

  1. <script type="text/javascript">  
  2.         $('#myModal').on('shown.bs.modal', function () {  
  3.             $('#myInput').trigger('focus')  
  4.         })  
  5. </script>  

To use bootstrap 4 modal in your project. You need have following downloaded or cdn link scripts.

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  

Modal CSS Classes

.modal Creates a modal
.modal-content Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer
.modal-dialog-centered Centers the modal vertically and horizontally within the page
.modal-header Defines the style for the header of the modal
.modal-body Defines the style for the body of the modal
.modal-footer Defines the style for the footer in the modal. This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class
.modal-sm Specifies a small modal
.modal-lg Specifies a large modal
.fade Adds an animation/transition effect which fades the modal in and out

Trigger the Modal Via data-* Attributes

Add data-toggle="modal" and data-target="#modalID" to any element.

Note
For <a> elements, omit data-target, and use href="#modalID" instead

Modal with Overlay Example 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Modal</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9.     <script type="text/javascript">  
  10.         (function () {  
  11.             'use strict';  
  12.             window.addEventListener('load', function () {  
  13.                 var form = document.getElementById('needs-validation');  
  14.                 form.addEventListener('submit', function (event) {  
  15.                     if (form.checkValidity() === false) {  
  16.                         event.preventDefault();  
  17.                         event.stopPropagation();  
  18.                     }  
  19.                     form.classList.add('was-validated');  
  20.                 }, false);  
  21.             }, false);  
  22.         })();  
  23.     </script>  
  24. </head>  
  25. <body>  
  26.     <div class="container py-5">  
  27.         <h4 class="text-center text-uppercase">Bootstrap 4 modal</h4>  
  28.         <button type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#Employee">Add New Employee</button>  
  29.         <div class="modal fade" id="Employee">  
  30.             <div class="modal-dialog">  
  31.                 <div class="modal-content">  
  32.                     <form id="needs-validation" novalidate>  
  33.                         <div class="modal-header">  
  34.                             <h5 class="modal-title text-uppercase text-center">Employee Information</h5>  
  35.                         </div>  
  36.                         <div class="modal-body">  
  37.   
  38.                             <div class="form-row">  
  39.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  40.                                     <label for="firstName">First Name</label>  
  41.                                     <input id="firstName" type="text" placeholder="First Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
  42.                                     <div class="invalid-feedback">  
  43.                                         Please enter first name.  
  44.                                     </div>  
  45.                                 </div>  
  46.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  47.                                     <label for="lastName">Last Name</label>  
  48.                                     <input id="lastName" type="text" placeholder="Last Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
  49.                                     <div class="invalid-feedback">  
  50.                                         Please enter last name.  
  51.                                     </div>  
  52.                                 </div>  
  53.                             </div>  
  54.                             <div class="form-row">  
  55.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  56.                                     <label for="city">City</label>  
  57.                                     <input id="city" type="text" placeholder="City" class="form-control" aria-describedby="inputGroupPrepend" required />  
  58.                                     <div class="invalid-feedback">  
  59.                                         Please enter city.  
  60.                                     </div>  
  61.                                 </div>  
  62.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  63.                                     <label for="state">State</label>  
  64.                                     <input id="state" type="text" placeholder="State" class="form-control" aria-describedby="inputGroupPrepend" required />  
  65.                                     <div class="invalid-feedback">  
  66.                                         Please enter state.  
  67.                                     </div>  
  68.                                 </div>  
  69.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  70.                                     <label for="country">State</label>  
  71.                                     <input id="country" type="text" placeholder="Country" class="form-control" aria-describedby="inputGroupPrepend" required />  
  72.                                     <div class="invalid-feedback">  
  73.                                         Please enter country.  
  74.                                     </div>  
  75.                                 </div>  
  76.                             </div>  
  77.                         </div>  
  78.                         <div class="modal-footer">  
  79.                             <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal">Cancel</button>  
  80.                             <button type="submit" class="btn btn-primary rounded-0">Register</button>  
  81.                         </div>  
  82.                     </form>  
  83.                 </div>  
  84.             </div>  
  85.         </div>  
  86.     </div>  
  87. </body>  
  88. </html>  

Output

Screenshot-1

Modal Concept In Bootstrap 4

Screenshot-2

Modal Concept In Bootstrap 4 

Modal without Overlay Example

Note
You cannot click outside of this modal to close it.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Modal</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9.     <script type="text/javascript">  
  10.         (function () {  
  11.             'use strict';  
  12.             window.addEventListener('load', function () {  
  13.                 var form = document.getElementById('needs-validation');  
  14.                 form.addEventListener('submit', function (event) {  
  15.                     if (form.checkValidity() === false) {  
  16.                         event.preventDefault();  
  17.                         event.stopPropagation();  
  18.                     }  
  19.                     form.classList.add('was-validated');  
  20.                 }, false);  
  21.             }, false);  
  22.         })();  
  23.     </script>  
  24. </head>  
  25. <body>  
  26.     <div class="container py-5">  
  27.         <h4 class="text-center text-uppercase">Bootstrap 4 modal</h4>  
  28.         <button type="button" class="btn btn-primary rounded-0"  data-backdrop="false" data-toggle="modal" data-target="#Employee">Add New Employee</button>  
  29.         <div class="modal fade" id="Employee" role="dialog">  
  30.             <div class="modal-dialog">  
  31.                 <div class="modal-content">  
  32.                     <form id="needs-validation" novalidate>  
  33.                         <div class="modal-header">  
  34.                             <h5 class="modal-title text-uppercase text-center">Employee Information</h5>  
  35.                             <button type="button" class="close" data-dismiss="modal">×</button>  
  36.                         </div>  
  37.                         <div class="modal-body">  
  38.   
  39.                             <div class="form-row">  
  40.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  41.                                     <label for="firstName">First Name</label>  
  42.                                     <input id="firstName" type="text" placeholder="First Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
  43.                                     <div class="invalid-feedback">  
  44.                                         Please enter first name.  
  45.                                     </div>  
  46.                                 </div>  
  47.                                 <div class="col-sm-6 col-md-6 col-xs-12">  
  48.                                     <label for="lastName">Last Name</label>  
  49.                                     <input id="lastName" type="text" placeholder="Last Name" class="form-control" aria-describedby="inputGroupPrepend" required />  
  50.                                     <div class="invalid-feedback">  
  51.                                         Please enter last name.  
  52.                                     </div>  
  53.                                 </div>  
  54.                             </div>  
  55.                             <div class="form-row">  
  56.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  57.                                     <label for="city">City</label>  
  58.                                     <input id="city" type="text" placeholder="City" class="form-control" aria-describedby="inputGroupPrepend" required />  
  59.                                     <div class="invalid-feedback">  
  60.                                         Please enter city.  
  61.                                     </div>  
  62.                                 </div>  
  63.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  64.                                     <label for="state">State</label>  
  65.                                     <input id="state" type="text" placeholder="State" class="form-control" aria-describedby="inputGroupPrepend" required />  
  66.                                     <div class="invalid-feedback">  
  67.                                         Please enter state.  
  68.                                     </div>  
  69.                                 </div>  
  70.                                 <div class="col-sm-4 col-md-4 col-xs-12">  
  71.                                     <label for="country">State</label>  
  72.                                     <input id="country" type="text" placeholder="Country" class="form-control" aria-describedby="inputGroupPrepend" required />  
  73.                                     <div class="invalid-feedback">  
  74.                                         Please enter country.  
  75.                                     </div>  
  76.                                 </div>  
  77.                             </div>  
  78.                         </div>  
  79.                         <div class="modal-footer">  
  80.                             <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal">Cancel</button>  
  81.                             <button type="submit" class="btn btn-primary rounded-0">Register</button>  
  82.                         </div>  
  83.                     </form>  
  84.                 </div>  
  85.             </div>  
  86.         </div>  
  87.     </div>  
  88. </body>  
  89. </html>  

Output

Screenshot 1

Modal Concept In Bootstrap 4 

Screenshot 2

Modal Concept In Bootstrap 4


Similar Articles