@@include('./partials/page-title.html', {"pagetitle": "Components", "title": "Modals"})

Modals Examples

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.

Simple with gray footer

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.

Fullscreen Modal

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.

Warning your account

With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around
the world are updating their terms of service agreements to comply.

Active account

It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.

Single action

Payment Successful

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

Go back to dashboard

Centered with wide buttons

Payment Successful

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

Simple Modal with button position

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.

Simple with dismiss button

Deactivate account

Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.

Modal title

Beautifully designed, expertly crafted components that follow all accessibility best practices and are easy to customize.

Interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you’d rather write any necessary JS yourself.Every example is fully responsive and carefully designed and implemented to look great at any screen size.

Pop-up modal

Are you sure you want to delete this product?

Form element modal

Sign in to minia

Your email

Your password

Remember me

Forgot Password ?

Not registered? Signup now

Sizes

Modal title

Beautifully designed, expertly crafted components that follow all accessibility best practices and are easy to customize.

Modal title

Beautifully designed, expertly crafted components that follow all accessibility best practices and are easy to customize.

Modal title

Beautifully designed, expertly crafted components that follow all accessibility best practices and are easy to customize.

Modal title

Beautifully designed, expertly crafted components that follow all accessibility best practices and are easy to customize.

Toggle between modals (Multiple modal)

Modal 1

Show a second modal and hide this one with the button below.Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

Modal 2

Show a second modal and hide this one with the button below.Use the modal component to show interactive dialogs.

@@include('./partials/footer.html')