Open In App

Bootstrap 5 Modal getInstance() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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=
  
    <!-- Bootstrap Javascript -->
    <script src=
    </script>
    <script src=
    </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=
  
    <!-- Bootstrap Javascript -->
    <script src=
    </script>
    <script src=
    </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



Last Updated : 14 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads