Modal JavaScript plugin (bootstrap) with example

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head
<title>Modal example</title
<meta charset="utf-8"
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script 
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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
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" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
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" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script 
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

chevron_right


Output :



My Personal Notes arrow_drop_up

Full stack web developer | GCI 18 Mentor | JSec at IIITV Coding Club

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.

About immukul

Executive Software Developer at Cavisson Systems