Open In App

Spectre Modals

Spectre Modals are flexible dialog prompts, the Spectre Modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal’s backdrop automatically closes the modal.

We can also define the size of the modal by using Spectre Modal sizes, to create a modal you need to use the modal class first then you have to mention the modal size like modal-sm is denoting small size modal.



Spectre Modal Types:

Spectre Modal Classes:



Syntax: All the classes are mentioned in this syntax.

<div class="modal modal-size-class">
    <a href="#" class="modal-overlay"></a>
    <div class="modal-container">
        <div class="modal-header">
            <a href="#"></a>
            <div class="modal-title">..</div>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            ...
        </div>
    </div>
</div>

The below examples illustrate the Spectre Modal:

Example 1: In this example, we will create a regular modal.




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Modal</strong>
    </center>
    <br><br>
    <div class="modal active">
        <a href="#close" class="modal-overlay"></a>
        <div class="modal-container">
        <div class="modal-header">
            <a href="#close"
            class="btn btn-clear float-right">
            </a>
            <div class="modal-title h5">
            Geeksforgeeks
            </div>
            <p>This is a Modal
        </div>
        <div class="modal-body">
            <div class="content">
            <p>
                We provide a variety of services for
                you to learn, thrive and also have fun!
                Free Tutorials.
            </p>
  
  
            </div>
        </div>
        <div class="modal-footer">
            A Computer science Portal for Geeks
        </div>
        </div>
    </div>
</body>
  
</html>

Output:

Spectre Modals

Example 2: In this example, we will create the large modal.




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <strong>SPECTRE Modal</strong>
        <br><br>
        <button onclick="openModal()">Open Modal</button>
    </center>
    <br>
    <div class="modal modal-lg">
        <a href="#close" class="modal-overlay"></a>
        <div class="modal-container">
            <div class="modal-header">
                <a href="#close" onclick="closeModal()" 
                   class="btn btn-clear float-right">
                </a>
                <div class="modal-title h5">
                    Geeksforgeeks
                </div>
                <p>This is a large Modal
            </div>
            <div class="modal-body">
                <div class="content">
                    <p>
                        We provide a variety of services for
                        you to learn, thrive and also have fun!
                        Free Tutorials.
                    </p>
  
                </div>
            </div>
            <div class="modal-footer">
                A Computer science Portal for Geeks
            </div>
        </div>
    </div>
  
    <script>
        let modalElement = document.querySelector(".modal");
        function openModal() {
  
            // Add the "active" class for opening the Modal
            modalElement.classList.add("active");
        }
  
        function closeModal() {
  
            // Remove the "active" class for closing the Modal
            modalElement.classList.remove("active");
        }
    </script>
</body>
  
</html>

Output:

Reference: https://picturepan2.github.io/spectre/components/modals.html


Article Tags :