幽灵模式

Spectre Modal 是灵活的对话框提示，Spectre Modal 组件是一个对话框/弹出窗口，一旦单击触发按钮，就会显示在当前页面的顶部。但是，单击模态框的背景会自动关闭模态框。

我们还可以通过使用 Spectre 模态大小来定义模态的大小，要创建一个模态，您首先需要使用模态类，然后您必须提及模态大小，例如 modal-sm 表示小尺寸模态。

幽灵模式类型：

• Spectre Modal：这用于创建一个默认模态，它将包含模态的所有内容。
• 幽灵模式尺寸： 这用于创建具有不同大小的相同默认模式。

幽灵模式类：

• modal：这个类用于创建模态。
• modal-container：该类用于定义保存所有模型内容的模态容器。
• modal-overlay：此类用于创建模态布局。
• modal-header：该类用于定义模态的标题部分。
• modal-title：该类用于定义模态框标题类下的模态框标题。
• modal-body：该类用于定义模态的主体部分。
• modal-footer：该类用于定义模态的页脚部分。

语法：此语法中提到了所有类。

    
    

        

            
            
..
        
        

            ...
        
        

            ...
        
    

以下示例说明了 Spectre 模式：

示例 1：在此示例中，我们将创建一个常规模式。

HTML

  

    
    
    

  

    
        
GeeksforGeeks
        SPECTRE Modal
    
    


    

        
        

        

            
            
            

            Geeksforgeeks
            
            
This is a Modal
        
        

            

            

                We provide a variety of services for
                you to learn, thrive and also have fun!
                Free Tutorials.
            
  
  
            
        
        

            A Computer science Portal for Geeks
        
        
    

  

输出：

幽灵模式

示例 2：在此示例中，我们将创建大型模态。

HTML

  

    
    
    

  

    
        GeeksforGeeks
        SPECTRE Modal
        
        Open Modal
    
    
    
        
        
            
                
                
                
                    Geeksforgeeks
                
                This is a large Modal
            
            
                
                    
                        We provide a variety of services for
                        you to learn, thrive and also have fun!
                        Free Tutorials.
                    
  
                
            
            
                A Computer science Portal for Geeks
            
        
    
  
    
        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");
        }
    

  

输出：

参考： https://picturepan2.github.io/spectre/components/modals.html