Datta Able
Navigation
Dashboard
UserNEW
Profile
User List
Add User
UI Element
Basic
Buttons
Model
Elements
Pages
404
Maintenance
Forms
Forms
Form Elements
Validation
File Upload
Email
Audit Log
CalendarNEW
Chat
Invoice
Roles & Permissions
Support
Form Wizard
Icons
Notifications
New order
Settings
Profile

Modal Components

Different types of modal dialogs for various use cases

Basic Modal

Standard modal with header, body and footer.

Large Modal

Wide modal for more content.

Small Modal

Compact modal for quick actions.

Confirmation Modal

Yes/No confirmation dialog.

Alert / Danger Modal

Warning style with red button.

Centered Modal

Vertically centered on screen.

Form Modal

Modal with input fields.

Scrolling Content Modal

Long content with scroll.

Auto-close Modal

Closes after 3 seconds.

Basic Modal

This is a basic modal dialog. You can put any content here.

Large Modal

This modal is wider (800px max-width). Perfect for larger forms, tables, or multiple columns.

Column 1
Column 2

Small Modal

Compact modal for quick actions.

Confirm Action

Are you sure you want to proceed? This action cannot be undone.

Alert

This is a dangerous action. Please be careful!

Centered Modal

This modal appears centered vertically and horizontally.

Login Form

Scrolling Content

Line 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Line 2: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line 3: Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Line 4: Duis aute irure dolor in reprehenderit in voluptate velit esse.

Line 5: Excepteur sint occaecat cupidatat non proident.

Line 6: More content to demonstrate scrolling behavior.

Line 7: You can scroll inside this modal body.

Line 8: The footer remains fixed at bottom.

Auto-close

This modal will close automatically in 3 seconds.