Spectre Modals

Last Updated : 27 Feb, 2022

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: This is used to create a default modal that will hold all the content of the modal.
Spectre Modal sizes: This is used to create the same default modal with different sizes.

Spectre Modal Classes:

modal: This class is used to create modals.
modal-container: This class is used to define the modal container that holds all the model content.
modal-overlay: This class is used to create a modal layout.
modal-header: This class is used to define the header section of the modal.
modal-title: This class is used to define the title of the modal that comes under the header class of the modal.
modal-body: This class is used to define the body section of the modal.
modal-footer: This class is used to define the footer section of the modal.

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</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>