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: 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.

Output:

👁 Spectre Modals

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

Output:

👁 Spectre Modals

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