package.docs.components.modals.mdx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
title: Modals
description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
---

## Default markup

```html example code centered height="30rem"



  
    
      
        Modal title
        
      
      
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
      
      
        
        
      
    
  

```

## Prompt and alert

```html example code centered height="30rem"



  
    
      
      
      
        
        Are you sure?
        Do you really want to remove 84 files? What you've done cannot be undone.
      
      
        
          
            
                Cancel
              
            
                Delete 84 items
              
          
        
      
    
  

```

```html example code centered height="30rem"



  
    
      
      
      
        
        Payment succedeed
        Your payment of $290 has been successfully submitted. Your invoice has been sent to [email protected].
      
      
        
          
            
              
                Go to dashboard
              
            
            
              
                View invoice
              
            
          
        
      
    
  

```

## Modal with form

```html example code centered height="30rem"



  
    
      
        New report
        
      
      
        
          Name
          
        
        Report type
        
          
            
              
              
                
                  
                
                
                  Simple
                  Provide only basic data needed for the report
                
              
            
          
          
            
              
              
                
                  
                
                
                  Advanced
                  Insert charts and additional advanced analyses to be inserted in the report
                
              
            
          
        
        
          
            
              Report url
              
                
                  https://tabler.io/reports/
                
                
              
            
          
          
            
              Visibility
              
            
          
        
      
      
        
          
            
              Client name
              
            
          
          
            
              Reporting period
              
            
          
          
            
              Additional information
              
            
          
        
      
      
        
          Cancel
        
        
          
          Create new report
        
      
    
  

```