Bootstrap 5 Modal getInstance() Method

Last Updated : 01 Aug, 2024

Bootstrap 5 Modal getInstance() method is used to get the modal instance from a DOM element if exists.

Syntax:

const modal = bootstrap.Modal.getInstance('#modal-ID');

Return Value: The Modal getInstance() method returns the instance of the Bootstrap Modal.

Example 1: In this example, we get the instance of the modal using the getInstance() method and then invoked its show() method to show the modal.

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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Javascript -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div>
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Modal getInstance() Method
            </strong>
        </div>

        <div class="modal fade" id="gfg" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title">
                            GeeksforGeeks
                        </h1>
                    </div>
                    <div class="modal-body">
                        GeeksforGeeks is a computer science portal
                        for the geeks. Here you can cosume computer
                        science related content or share your
                        knowledge with the world by contributing
                        on the write portal.
                    </div>
                </div>
            </div>
        </div>

        <button class="btn btn-success mt-4" onclick="getInstanceAndShow()">
            Get Modal Instance and Show It
        </button>
    </div>

    <script>
        // Initialize the modal
        const myModal = new bootstrap.Modal('#gfg');
        
        // Function Called on click of the Button
        function getInstanceAndShow()
        {
            // Get the Instance
            const modal = bootstrap.Modal.getInstance('#gfg');
            // Show the Modal
            modal.show();
        }
    </script>
</body>

</html>

Output:

Example 2: In this example, we used the getInstance() method of the modal to get its instance and then called its dispose() method so it can no longer be opened programmatically.

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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" 
          href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Bootstrap Javascript -->
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>

<body>
    <div class="container">
        <div class="mt-5">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Modal getInstance() Method
            </strong>
        </div>

        <div class="modal fade" id="gfg" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title">
                            DSA Self Paced
                        </h1>
                    </div>
                    <div class="modal-body">
                        Most popular course on DSA trusted by 
                        over 75,000 students! Built with years 
                        of experience by industry experts and 
                        gives you a complete package of video 
                        lectures, practice problems, 
                        quizzes, discussion forums and contests. 
                        Start Today!
                    </div>
                </div>
            </div>
        </div>

        <button class="btn btn-success mt-4" 
                onclick="showModal()">
            Show Modal
        </button>

        <button class="btn btn-danger mt-4" 
            onclick="getInstanceAndDispose()">
            Get Modal Instance and Dispose It
        </button>
    </div>

    <script>
        // Initialize the modal
        const myModal = new bootstrap.Modal('#gfg');

        // Function Called on click of the Dispose Button
        function getInstanceAndDispose()
        {
            // Get the Instance
            const modal = bootstrap.Modal.getInstance('#gfg');
            // Dispose the Modal
            modal.dispose();
        }

        // Function Called on click of the Show Button
        function showModal()
        {
            // Get the Instance
            const modal = bootstrap.Modal.getInstance('#gfg');
            // Show the Modal if It is not destroyed
            modal.show();
        }
    </script>
</body>

</html>

Output:

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

Bootstrap 5 Modal getOrCreateInstance() Method

badalmishra28

Improve

Article Tags :

Bootstrap 5 Modal getInstance() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?