Modals
Modals
Basic Modal
A standard modal dialog for general use.
Large Modal
A larger modal for more content.
Small Modal
A compact modal for quick actions.
Scrollable Modal
Modal with scrollable content.
Centered Modal
Vertically centered modal.
Fullscreen Modal
Full screen modal for immersive content.
Static Backdrop
Modal that doesn't close on backdrop click.
Form Modal
Modal containing a form.
Image Modal
Modal displaying an image.
Basic Modal
Welcome to the basic modal example! This is the most common type of modal used in web applications.
You can customize the content, add forms, images, or any HTML elements inside the modal body.
Large Modal
About Large Modals
Large modals provide more space for content, making them ideal for displaying detailed information, complex forms, or multiple sections of content. They offer better readability and can accommodate more interactive elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Analytics
View detailed statistics and reports
Alert
Are you sure you want to proceed?
This action cannot be undone.
Scrollable Modal
This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.
This content should appear at the bottom after you scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Centered Modal
This modal is vertically centered on the screen. It's perfect for important messages or confirmations that need user attention.
Success!
Your action has been completed successfully.
Fullscreen Modal
Welcome to Fullscreen Experience
This fullscreen modal provides an immersive experience for displaying large amounts of content, images, or complex forms. It's ideal for detailed presentations or multi-step processes.
- Feature 1: Immersive display
- Feature 2: Large content area
- Feature 3: Responsive design
Sample Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Static Backdrop Modal
This type of modal is useful for critical actions where you want to ensure the user interacts with the modal content before proceeding.
You must click the close button or one of the action buttons to dismiss this modal.
Contact Form
Beautiful Landscape
This stunning landscape showcases the beauty of nature. Perfect for displaying images in a modal overlay.