Open In App

Bootstrap 5 Modal Usage

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Modal plugin is used to create a customized webpage where we can add dialog boxes for user notifications and lightboxes. Bootstrap 5 modal can hide the content on demand with the help of JavaScript or via data attributes. Default scrolling behavior can also be overridden by modal and it gives a click area for dismissing the models which are shown on the webpage by using the .modal-backdrop class

We will discuss the usage of Bootstrap 5 Modal usages.

Bootstrap 5 Modal Usage

  • Via Data Attributes: We can activate a modal without using JavaScript by setting the value of the modal for data-toggle on the button tag which is a controller element. We should mention the targeted modal that we want to toggle by using data-target=”#ModalName”
  • Via JavaScript: We can also create a modal with the help of JavaScript which will help to manipulate the modal dynamically and to create an interactive web page.
  • Options: Options can be passed via data attributes or JavaScript.
  • Methods: There are different methods in JavaScript with the help of which we can manipulate the modal according to the user’s need.
  • Events: Few events of Bootstrap modal classes are used for the functionality of the modal. 

Example 1: The following code triggers a modal with id “modal”.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
        href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width: 700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#Modal">
            Launch demo modal
        </button>
        <!-- Modal -->
        <div class="modal fade" id="Modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            Modal title
                        </h5>
                        <button type="button" class="close"
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                Ã—
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        GeeksforGeeks
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Bootstrap 5 Modal Usage

Bootstrap 5 Modal Usage

Example 2: The following code toggles the modal using JavaScript. The modal will be automatically toggled.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CDn -->
    <link rel="stylesheet"
        href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3" style="width:700px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#Modal">
            Launch demo modal
        </button>
        <!-- Modal -->
        <div class="modal fade" id="Modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            Modal title
                        </h5>
                        <button type="button" class="close"
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                Ã—
                            </span>
                        </button>
                    </div>
                    <div class="modal-body">
                        GeeksforGeeks
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var myModal = 
        new bootstrap.Modal(document.getElementById('Modal'))
        myModal.toggle()
    </script>
</body>
</html>


Output:

Bootstrap 5 Modal Usage

Bootstrap 5 Modal Usage

Example 3: The following code is used to see the example of show.bs.modal where we can open to modal alternatively.

HTML




<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap CDN -->
        <link rel="stylesheet" 
            href=
            integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
            crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
                crossorigin="anonymous">
        </script>
        <script src=
                integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
                crossorigin="anonymous">
        </script>
    </head>
  
    <body style="text-align: center;">
        <div class="container mt-3"
            style="width: 700px;">
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
            <!-- Button trigger modal -->
            <button type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target="#exampleModal"
                    data-whatever="@geeksforgeeks">
            Send email to @geeksforgeeks
            </button>
            <button type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target="#exampleModal"
                    data-whatever="@gurrrung">
            Send email to author @gurrrung
            </button>
  
            <!-- Modal -->
            <div class="modal fade" id="exampleModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                            New message
                            </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="mb-3">
                                    <label for="recipient-name"
                                        class="col-form-label">
                                        Recipient:
                                    </label>
                                    <input type="text"
                                        class="form-control"
                                        id="recipient-name" />
                                </div>
                                <div class="mb-3">
                                    <label for="message-text"
                                        class="col-form-label">
                                        Message:
                                    </label>
                                    <textarea class="form-control"
                                            id="message-text">
                                    </textarea>
                                </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">
                                Send message
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var exampleModal =
                document.getElementById("exampleModal");
                exampleModal.addEventListener(
                    "show.bs.modal", function (event) {
                    // Button that triggered the modal
                    var button = event.relatedTarget;
                    // Extract info from data-* attributes
                    var recipient =
                    button.getAttribute("data-whatever");
                    // Update the modal's content.
                    var modalTitle =
                    exampleModal.querySelector(".modal-title");
                    var modalBodyInput =
                    exampleModal.querySelector(".modal-body input");
                    modalTitle.textContent =
                    "New message to " + recipient;
                    modalBodyInput.value = recipient;
                });
        </script>
    </body>
</html>


 Output:

Bootstrap 5 Modal Usage

Bootstrap 5 Modal Usage

Reference: https://getbootstrap.com/docs/5.0/components/modal/#usage



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