Open In App

Bootstrap 5 Varying Modal Content

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Modal Content can be varied by passing the value which needed to be accessed in the modal to a data-bs-* (where * can be anything you like) attribute of the triggering button. The value passes to the modal can be accessed using JavaScript and can be used in the modal content. 

Bootstrap 5 Modal Content Classes: There are no specific classes for varying modal content. We just use a data-bs-* attribute to pass the variable value.

Bootstrap 5 Varying modal content Attribute:

  • data-bs-*: It is used to vary the contents of the modal depending on which button was clicked. 

The * can be replaceable by target and toggle.

Syntax:

<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">...</h3>
            </div>
            <div class="modal-body">
                ...
            </div>
        </div>
    </div>
</div>

Example 1: In this example, we pass the value for the header of the modal so when the modal is opened using different buttons it has different headings.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 - GeeksforGeeks</title>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
 
    <!-- Bootstrap Javascript -->  
    <script src=
    </script>
</head>
 
<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Varying Modal Content</strong>
        </div>
 
        <button type="button" class="btn btn-success"
            data-bs-toggle="modal" data-bs-target="#mymodal"
            data-bs-heading="About GeeksforGeeks">
            Open The Modal
        </button>
 
        <a class="btn btn-secondary" data-bs-toggle="modal"
            data-bs-target="#mymodal"
            data-bs-heading="The Starting of GeeksforGeeks">
            Open Modal with a Different Title
        </a>
 
        <div class="modal fade" id="mymodal"
            data-bs-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        Title
                    </div>
                    <div class="modal-body">
                        <p>
                            GeeksforGeeks is a computer science portal for
                            geeks. It was started in 2009 by Sandeep Jain.
                            Today it is considered to be one of the best
                            resources for the students preparing for job
                            in computer science domain.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button"
                            class="btn btn-danger"
                            data-bs-dismiss="modal">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        const myModal = document.querySelector('#mymodal');
        myModal.addEventListener('show.bs.modal', function (event) {
            // Get the reference of the triggering button
            // and retrieve the value from the attribute
            const button = event.relatedTarget;
            const heading = button.getAttribute('data-bs-heading');
 
            // Set the value for the heading
            const title = myModal.querySelector('.modal-header').textContent =
                  heading;
        });
    </script>
</body>
 
</html>


Output:

Bootstrap 5 Varying modal content

Bootstrap 5 Varying modal content

Example 2: We can also use more than one data-bs-* attributes to pass more than one varying content to the modal. The example below illustrates the same. We are passing the modal heading, content, and footer using the attributes on the triggering button.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 - GeeksforGeeks</title>
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
 
    <!-- Bootstrap Javascript -->  
    <script src=
    </script>
</head>
 
<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>Bootstrap 5 Varying Modal Content</strong>
        </div>
 
        <button 
            class="btn btn-success"
            data-bs-toggle="modal"
            data-bs-target="#mymodal"
            data-bs-heading="GeeksforGeeks Practice Portal"
            data-bs-footercontent="Visit the Practice Portal for more details"
            data-bs-modalcontent="Using GFG's Practice portal you can
            practice on you problem solving skills.">
            Open Modal for Practice Portal
        </button>
 
        <button
            class="btn btn-warning"
            data-bs-toggle="modal"
            data-bs-target="#mymodal"
            data-bs-heading="GeeksforGeeks Courses"
            data-bs-footercontent="Visit the Courses for more details"
            data-bs-modalcontent="There are lot of free as well as
            paid courses offered by GeeksforGeeks which help
            you to improve your skills.">
            Open Modal for Courses
        </button>
 
        <button
            class="btn btn-info"
            data-bs-toggle="modal"
            data-bs-target="#mymodal"
            data-bs-heading="GeeksforGeeks Job Portal"
            data-bs-footercontent="Visit the Job Portal for more details"
            data-bs-modalcontent="GeeksforGeeks Job Portal helps
            you finding a good high paying job if you have skills.">
            Open Modal for Job Portal
        </button>
 
        <div class="modal" id="mymodal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Placeholder Title</h3>
                    </div>
                    <div class="modal-body">
                        Placeholder Content
                    </div>
                    <div class="modal-footer text-center">
                        Placeholder Footer
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        const myModal = document.querySelector('#mymodal');
            myModal.addEventListener('show.bs.modal', function(event) {
                // Get the reference of the triggering button
                const button = event.relatedTarget;
 
                // Get the data for inserting into modal
                const heading = button.getAttribute('data-bs-heading');
                const modalcontent = button.getAttribute('data-bs-modalcontent');
                const footercontent = button.getAttribute('data-bs-footercontent');
 
                // Set the value in the modal
                myModal.querySelector('.modal-title').textContent = heading;
                myModal.querySelector('.modal-body').textContent = modalcontent;
                myModal.querySelector('.modal-footer').textContent = footercontent;
            });
    </script>
</body>
</html>


Output:

Bootstrap 5 Varying modal content

Bootstrap 5 Varying modal content

Reference: https://getbootstrap.com/docs/5.2/components/modal/#varying-modal-content



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