0.20.1
>

Components

Modal

Use modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Requires JS

Note that this component requires use our javascript file to works, else you can skip this message if you are already using Perfect UI as a package.

Basic

Modal component uses the Card component.

To create a modal, simply add `.modal` class at `dialog` element.

Uses the Card component to create the modal content.

Attention needed

To show or hide the modal, change the `open` attribute at `dialog` element.

You can do that with Perfect UI or any other way.

To open a modal with Perfect UI, use the `data-modal` attribute, providing a modal ID.

To close a modal with Perfect UI, use the `data-autoclose` attribute.

Modal title
Modal content

Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it.

To create a static backdrop modal, simply add the `.static-backdrop` in the `.modal` element.

Modal title
Modal content

Scrolling behavior

Modal dialogs differ in width, whereas height is determined by the content. Once it reaches a certain threshold, the body content will scroll while the header and footer remain fixed until the bottom of the modal dialog is reached.

Modal title

Be bold

Motivate teams to do their best work. Offer best practices to get users going in the right direction. Be bold and offer just enough help to get the work started, and then get out of the way. Give accurate information so users can make educated decisions. Know your user's struggles and desired outcomes and give just enough information to let them get where they need to go.

Be optimistic

Focusing on the details gives people confidence in our products. Weave a consistent story across our fabric and be diligent about vocabulary across all messaging by being brand conscious across products to create a seamless flow across all the things. Let people know that they can jump in and start working expecting to find a dependable experience across all the things. Keep teams in the loop about what is happening by informing them of relevant features, products and opportunities for success. Be on the journey with them and highlight the key points that will help them the most - right now. Be in the moment by focusing attention on the important bits first.

Be practical, with a wink

Keep our own story short and give teams just enough to get moving. Get to the point and be direct. Be concise - we tell the story of how we can help, but we do it directly and with purpose. Be on the lookout for opportunities and be quick to offer a helping hand. At the same time realize that nobody likes a nosy neighbor. Give the user just enough to know that something awesome is around the corner and then get out of the way. Write clear, accurate, and concise text that makes interfaces more usable and consistent - and builds trust. We strive to write text that is understandable by anyone, anywhere, regardless of their culture or language so that everyone feels they are part of the team.

Toggle between modals

Toggle between two separate modals.

Modal 1
Show a second modal and hide this one with the button below.
Modal 2
Hide this modal and show the first with the button below.

Perfect UI © 2025

No results found