Modal JavaScript plugin (bootstrap) with example

Last Updated : 28 Mar, 2019

You can use Bootstrap’s Javascript Modal plugin to create user notifications, lightboxes or custom content boxes.
Example:

<html> 
<head>  
<title>Modal example</title>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"> 
<script 
src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> 
<script 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script> 
</head>  
<body>  
    <!-- Modal Trigger Button -->
    <button type="button" class="btn btn-success" data-toggle="modal"
data-target="#practiseModal"> 
        OPEN PRACTISE MODAL 
    </button>   
    <!-- Modal Body -->
    <div class="modal fade" id="practiseModal" tabindex="-1" role="dialog" 
aria-labelledby="practiseModalLabel" aria-hidden="true"> 
        <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
            <h5 class="modal-title" id="practiseModalLabel"> 
              Title of the Modal</h5> 
            <button type="button" class="close" 
                 data-dismiss="modal" aria-label="Close"> 
                <span aria-hidden="true">×</span> 
            </button> 
            </div> 
            <div class="modal-body"> 
            Content of the Modal 
            </div> 
            <div class="modal-footer"> 
            <button type="button" class="btn btn-danger" 
               data-dismiss="modal">Close</button> 
            </div> 
        </div> 
        </div> 
    </div> 
</body> 
</html> 

Output:

Scrolling content with more length than the viewport :
When the content in the modal is more than the user’s viewport, the modals become scrollable, and they scroll independent to that of the page. The source code remains the same as above.
Output:

Vertically centered Modal :
To vertically center a modal, you should add a ‘modal-dialog-centered’ class to the div that has ‘modal-dialog’ class.

<!DOCTYPE html>  
<head>  
<title>Modal example</title>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script> 
</head>  
<body>  
    <!-- Modal Trigger Button -->
    <button type="button" class="btn btn-success" data-toggle="modal" 
      data-target="#practiseLongModal"> 
        OPEN CENTERED MODAL 
    </button>   
    <!-- Modal Body -->
    <div class="modal fade" id="practiseLongModal" 
    tabindex="-1" role="dialog" aria-labelledby="practiseLongModalLabel" 
       aria-hidden="true"> 
        <div class="modal-dialog modal-dialog-centered" role="document"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
            <h5 class="modal-title" id="practiseLongModalLabel"> 
               Title of the Modal</h5> 
            <button type="button" class="close" data-dismiss="modal" 
                 aria-label="Close"> 
                <span aria-hidden="true">×</span> 
            </button> 
            </div> 
            <div class="modal-body"> 
            Content of the Modal 
            </div> 
            <div class="modal-footer"> 
            <button type="button" class="btn btn-danger" 
              data-dismiss="modal">Close</button> 
            </div> 
        </div> 
        </div> 
    </div> 
</body> 
</html>  

Output :

Modals of different sizes :
You can use different sizes for your modals. Add one of the following classes to the div having ‘modal-dialog’ class. Below is a table describing the different sizes provided by Bootstrap. You can also use custom sizes using JS or CSS.

Size	Class	Width (px)
Small	.modal-sm	300
Default	None	500
Large	.modal-lg	800
Extra Large	.modal-xl	1140

Source Code:

<!DOCTYPE html>  
<head>  
<title>Modal example</title>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"> 
<script 
src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> 
<script 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script> 
</head>  
<body> 
  
    <!-- Small Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
data-target=".smallExampleModal">SMALL MODAL</button> 
  
    <div class="modal fade smallExampleModal" tabindex="-1" role="dialog" 
aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3>Small Modal</h3> 
            </div> 
        </div> 
    </div> 
    </div> 
  
    <!-- Large Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
data-target=".largeExampleModal">LARGE MODAL</button> 
  
    <div class="modal fade largeExampleModal" tabindex="-1" role="dialog" 
aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3>Large Modal</h3> 
            </div> 
        </div> 
    </div> 
    </div> 
  
    <!-- Extra Large Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
data-target=".extraLargeExampleModal">EXTRA LARGE MODAL</button> 
    <div class="modal fade extraLargeExampleModal" 
    tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" 
aria-hidden="true"> 
    <div class="modal-dialog modal-xl"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3>Extra Large Modal</h3> 
            </div> 
        </div> 
    </div> 
    </div>     
</body> 
</html>  