Open In App

Blaze UI Methods Model

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a user interface toolkit that helps developers to build maintainable websites by using its components. All of its components are mobile-first and scale accordingly based on screen size.

In this article, we will be seeing Blaze UI Modal Methods. There are three Modal methods which are listed below.

1. show() Method: This method is used to open the modal programmatically. This method accepts no parameter and returns void.

Syntax:

document.querySelector(".selector").show();

Example 1: This example illustrates the use of the show() method to open the modal 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">
    <title> Modal Methods | Blaze UI </title>
    <link rel="stylesheet" href=
 
    <script type="module" src=
    </script>
 
    <style>
        html {
            font-family: sans-serif;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
    <h3>
        Modal Methods - show() - Blaze UI
    </h3>
     
    <blaze-modal id="modal1" dismissible>
        <h2 class="c-heading u-super">
            GeeksforGeeks
            <div class="c-heading__sub">
                A Computer Science Portal for Geeks.
            </div>
        </h2>
 
         
 
<p>
            GeeksforGeeks is a online computer
            science portal which offers content
            related to various computer science
            branches. It also offers courses for
            GATE, DSA, Competitive Programming, etc.
        </p>
 
 
    </blaze-modal>
 
    <button class="c-button c-button--info"
            onclick="openModal()">
        Open Modal
    </button>
 
    <script>
        function openModal() {
            document.querySelector("#modal1").show();
        }
    </script>
</body>
 
</html>


Output:

 

2. close() Method: This method is used to hide the modal. It accepts no parameter and returns void.

Syntax:

document.querySelector(".selector").close();

Example 2: This example shows the use of the close() method to close the modal. The modal is opened and closed after 4 seconds automatically.

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> Modal Methods | Blaze UI </title>
    <link rel="stylesheet" href=
 
    <script type="module" src=
    </script>
 
    <style>
        html {
            font-family: sans-serif;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
    <h3>
        Modal Methods - close() - Blaze UI
    </h3>
     
    <blaze-modal id="modal1">
        <h2 class="c-heading u-super">
            GeeksforGeeks
            <div class="c-heading__sub">
                A Computer Science Portal for Geeks.
            </div>
        </h2>
 
         
 
<p>
            GeeksforGeeks is a online computer
            science portal which offers content
            related to various computer science
            branches. It also offers courses for
            GATE, DSA, Competitive Programming, etc.
        </p>
 
 
    </blaze-modal>
 
    <button class="c-button c-button--info"
            onclick="openThenCloseModal()">
        Open Modal and Close after 4 Seconds
    </button>
 
    <script>
        function openThenCloseModal() {
            document.querySelector("#modal1").show();
            setTimeout(() => {
                document.querySelector("#modal1").close();
            }, 4000);
        }
    </script>
</body>
 
</html>


Output:

 

3. isOpen() Method: This method is used to check whether the modal is currently open or not. It accepts no parameter and returns a promise which resolves into a boolean value depending on the current state of the modal, true if the modal is open and false otherwise.

Syntax:

document.querySelector(".selector").isOpen();

Example 3: This example illustrates the use of the isOpen() method to check whether the modal is currently open or not.

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> Modal Methods | Blaze UI </title>
    <link rel="stylesheet" href=
 
    <script type="module" src=
    </script>
 
    <style>
        html {
            font-family: sans-serif;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
    <h3>
        Modal Methods - isOpen() - Blaze UI
    </h3>
     
     
 
<p>isOpen() : <span id="result"></span></p>
 
 
 
    <blaze-modal id="modal1">
        <h2 class="c-heading u-super">
            GeeksforGeeks
            <div class="c-heading__sub">
                A Computer Science Portal for Geeks.
            </div>
        </h2>
 
         
 
<p>
            GeeksforGeeks is a online computer
            science portal which offers content
            related to various computer science
            branches. It also offers courses for
            GATE, DSA, Competitive Programming, etc.
        </p>
 
 
    </blaze-modal>
 
    <button class="c-button c-button--info"
            onclick="openCloseModal()">
        Open Modal
    </button>
 
    <script>
        /*
        This method opens the modal and shows the
        promise return value that closes the modal
        and updates the shown return value.
        */
        function openCloseModal() {
            document.querySelector("#modal1").show();
            showPromiseValue();
            setTimeout(() => {
                document.querySelector("#modal1").close();
                showPromiseValue();
            }, 2000);
        }
 
        function showPromiseValue() {
            document.querySelector("#modal1")
            .isOpen().then(function (result) {
                document.querySelector("#result")
                .innerText = result;
            });
        }
    </script>
</body>
 
</html>


Output:

 

Reference: https://www.blazeui.com/objects/modals



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