Keen | Modal

Dashboards
- Dashboards
- Navy Aside
- Brand Aside
- Navy Header
- Light Aside
- Brand Header
Custom
Apps
- Apps
- Users
  - Users
  - List - Columns 1
  - List - Columns 2
  - List - Columns 3
  - List - Row
  - List - Datatable
  - Add User
  - Edit User
- Profile
  - Profile
  - Overview 1
  - Overview 2
  - Overview 3
  - Personal Information
  - Account Settings
  - Change Password
  - User Settings
- Inboxnew
Pages
- Pages
- Wizards
  - Wizards
  - Wizard v1
  - Wizard v2
  - Wizard v3
  - Wizard v4
- Blog
  - Blog
  - Blog Grid
  - Blog Grid v2
  - Blog List
  - Blog Post
- Pricing
  - Pricing
  - Pricing v1
  - Pricing v2
- Invoices
  - Invoices
  - Invoice v1
  - Invoice v2
- FAQs
  - FAQs
  - FAQ v1
  - FAQ v2
  - FAQ v3
  - FAQ v4
- Login Pages
  - Login v1
  - Login v2
- Error Pages
  - 404 - v1
  - 404 - v2
  - 404 - v3
  - 404 - v4
Layout
Features
- Features
- Header
  - Non-fixed
  - Menu Removed
- Subheader
- Aside
- Misc
Builder
Components
Base
- Base
- Alert
- Buttons
- Button Group
- Card
- Collapse
- Accordions
- Dropdown
- List Group
- Modal
- Navs
- Tabs
- Badge
- Spinners
- Toasts
- Pagination
- Popovers
- Tooltips
- Progress
- Breadcrumb
- Table
Custom
- Custom
- Colors
- Typography
- Spinners
- Notes
- Lists
- Notifications
- Media
- Timeline
- Navs
- Pagination
- Head
Extended2
- Extended2
- Sticky Panels
- Block UI
- Perfect Scroll
- Toastr
- Tree View
- SweetAlert2
- Dual Listbox
- Session Timeout
- Idle Timer
Widgets
- Widgets
- Charts
- General
Forms
- Forms
- Controls
  - Base Inputs
  - Input Groups
  - Checkbox
  - Radio
  - Switch
  - Options
  - Avatar Inputs
- Widgets
- Editors
- Layouts
- Validation
  - States
  - Controls
  - Widgets
- File Upload
  - DropzoneJS
  - Uppy
Keen Datatable
- Keen Datatable
- Base
- Advanced
- Scrolling
  - Vertical Scrolling
  - Horizontal Scrolling
- Child Datatables
  - Local Data
  - Remote Data
- API
  - API Methods
  - Events
DataTables
- DataTables
- Basic
- Advanced
- Data sources
- Search Options
  - Column Search
  - Advanced Search
- Extensions
  - Buttons
  - ColReorder
  - KeyTable
  - Responsive
  - RowGroup
  - RowReorder
  - Scroller
  - Select
Icons
Portlets
- Portlets
- Base
- Tools
- Draggable
- Sticky
Calendar
- Calendar
- Basic
- List View
- Agenda Week View
- Google Calendar
- External Events
- Event Rendering
Charts
- Charts
- Flot Charts
- Google Charts
- Morris Charts
- Chart JS

Export Tools
Print
Copy
Excel
CSV
PDF

Pages
Reports
- Finance Reports
- Project Reports
- HR Reports
- Reporting Apps
Apps

User Notifications

23 new notifications

New order has been received

2 hrs ago

New customer is registered

3 hrs ago

Application has been approved

3 hrs ago

New file has been uploaded

5 hrs ago

New user feedback received

8 hrs ago

System reboot has been successfully completed

12 hrs ago

New order has been placed

15 hrs ago

Company meeting canceled

19 hrs ago

New report has been received

23 hrs ago

Finance report has been generated

25 hrs ago

New customer comment recieved

2 days ago

New customer is registered

3 days ago

English
Spanish
German

Hi, Sean

Alex Stone

CTO, Loop Inc.

My Profile
My Tasks
Messages
Settings
Sign Out

Modal

Components Modal

Document
Message
Product
Report pdf
Post
Customer

Reports

Products
Customers 6
Orders
Reports
Console new
Settings

Keen extends Bootstrap Modal component with a variety of options to provide uniquely looking Modal component that matches the Keen's design standards.
For more info please visit the plugin's Documentation.

Basic Examples

Modal components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

Modal title

Modal body text goes here.

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Modal title

Modal body text goes here.

Scrollable modal

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.