Open In App

Explain modal in Bootstrap 4

Improve
Improve
Like Article
Like
Save
Share
Report

Modal is one of the components of Bootstrap 4 built with HTML, CSS, and JavaScript and is a lightweight, responsive JavaScript plugin used to add dialogs, user notifications, lightboxes, or just custom content to the site. 

Bootstrap modal

Important points to remember: 

  1. Bootstrap supports only one modal per window, and nesting them is considered poor practice.
  2. Clicking on the backdrop of the modal will instantly close the modal. 
  3. Modals need to be placed before any other content in the document and they remove the scroll of the body, so when we scroll the content of the model scroll. 
  4. The reason we need to place modal at the top before any other content is because it makes use of position: fixed which could cause interference with other elements. 
  5. Modals do not support the autofocus attribute of HTML, so we can use custom JavaScript instead. 

Different components of modal: 

Scrolling If the content placed inside the modal becomes longer than the viewport of users then they scroll independently of the page within.
Vertically-center We add .modal-dialog-centered to .modal-dialog when we want to vertically center the modal.
Tooltips and popovers When modals are closed then any tooltips and popovers within would also be automatically dismissed
Using the grids We can use the bootstrap grid inside the modal by nesting the container-fluid inside of the modal-body class.
Varying modal content We can use the event.relatedTarget and HTML data-* attributes (via jQuery) to vary the contents of the modal depending on which modal was triggered.
Remove Animation For the modals which simply appear rather than fade into view, we could just remove the .fade class from the modal markup.
Dynamic heights If the height of a modal changes while it is triggered, to readjust the modal’s position in case of a scrollbar appearance, we could call $(‘#myModal’).modal(‘handleUpdate’).
Size options Modals have two optional sizes i.e. modal-lg, and modal-sm. 
Accessibility For the accessibility of the modal component we need to make sure we use to add role=”dialog” and aria-labelledby=”…” as well as referencing the modal title to .modal, and role=”document” to the .modal-dialog itself.
Embedding YouTube Video Embedding YouTube Video: Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more.
 

Simple steps to create a modal: 

  1. Create a trigger button.
  2. Create a modal component

Example 1: This example illustrate the creation of a basic simple modal in Bootstrap 4.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Modal Example!</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <br>
    <br>
    <center>
        <button type="button" 
                class="btn btn-success" 
                data-toggle="modal" 
                data-target="#exampleModal">
            Geeksforgeeks!
        </button>
    </center>
    <!-- Modal -->
    <div class="modal fade" 
         id="exampleModal"
         tabindex="-1" 
         role="dialog" 
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" 
             role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                        Title over here!
                    </h5>
                    <button type="button" 
                            class="close" 
                            data-dismiss="modal" 
                            aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    All the content!
                </div>
                <div class="modal-footer">
                    <button type="button" 
                            class="btn btn-secondary" 
                        data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" 
                            class="btn btn-primary">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

 

Example 2: This example illustrate creating modal using its different components in Bootstrap 4.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <br>
    <br>
    <center>
        <button type="button" 
                class="btn btn-success" 
                data-toggle="modal" 
                data-target="#exampleModal"
                data-whatever="@geeksforgeeks1">
            Open modal for @geeksforgeeks1
        </button>
        <button type="button" 
                class="btn btn-success" 
                data-toggle="modal" 
                data-target="#exampleModal"
                data-whatever="@geeksforgeeks2">
            Open modal for @geeksforgeeks2
        </button>
        <button type="button" 
                class="btn btn-success" 
                data-toggle="modal" 
                data-target="#exampleModal"
                data-whatever="@geeksforgeeks3">
            Open modal for @geeksforgeeks3
        </button>
  
        <div class="modal fade" 
             id="exampleModal" 
             tabindex="-1" 
             role="dialog" 
             aria-labelledby="exampleModalLabel"
             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="exampleModalLabel">
                            New message from geeks for geeks!
                        </h5>
                        <button type="button" 
                                class="close" 
                                data-dismiss="modal" 
                                aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">                                
                                 <p>
                                    Vertically centered, varying 
                                    modal content & scrolling 
                                    components are used!
                                 </p>
                            </div>
                            <div class="form-group">
                                <label for="message-text" 
                                class="col-form-label">
                                Message:
                            </label>                                
                                 <p>
                                    geeksforgeeks is a computer 
                                    science portal for geeks.
                                    It contains millions of articles 
                                    on various topics from interview 
                                    preparation, to a
                                    small topic or a subject.
                                    It provides various opportunities 
                                    for anyone who wants to get hired.
                                    It's considered as one of the best 
                                    platform for anyone who want to 
                                    gain or share
                                    their knowledge and skills.
                                    The top achievements of geeksforgeeks 
                                    includes billions of users all 
                                    over the world.
                                    Millions of articles have already 
                                    been published,
                                    and thousands of people getting 
                                    Hired by some of the top companies 
                                    with their numbers still growing.
                                </p><br>                              
                                 <p>
                                    Geeksforgeeks contains articles 
                                    from old topics to new, and provides 
                                    with a variety
                                    of services for you to learn, succeed 
                                    and also to enjoy the process!
                                    Free tutorials and millions of 
                                    articles are being provided over here, 
                                    the live,
                                    Online and Classroom Courses are being 
                                    provided.
                                    Frequent coding competition and 
                                    webinars by industry experts as well 
                                    as internship
                                    opportunities and job Opportunities 
                                    are available.
                                </p>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" 
                                class="btn btn-secondary" 
                                data-dismiss="modal">
                                     Close
                        </button>
                        <button type="button" 
                                class="btn btn-primary">
                            Save message
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
</html>


Output: 

 



Last Updated : 26 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads