Spectre Modal sizes

Last Updated : 28 Jan, 2022

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.

In this article, we will learn to create different sizes modal. 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 sizes Classes:

modal-sm: This class is used to create a small-sized modal, the modal container max width is 320px.
modal-lg: This class is used to create a large-sized modal, the modal container max width is 960px.

Note: If the modal size is not defined only the modal class is mentioned then it will be the default size modal, that is the medium size.

Syntax:

<div class="modal modal-sm">
  <a href="#" class="modal-overlay"></a>
  <div class="modal-container">
  ....
  </div>
</div>

The below example illustrates Spectre Modal sizes:

Example: In this example, we will create a small size modal. Note that the close button will be not responsive because of missing JavaScript functionality.

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 size Class</strong> 
    </center> 
    <br><br> 
    <div class="modal modal-sm 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 small 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>