You don't need a modal window
source link: https://youdontneedamodalwindow.dev/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
You don't need a modal window
You don't need a modal window
Just make a separate page.
Maybe you have a master/detail setup on your web app. There's a list of products/documents/whatever, and clicking on one brings up the details.
ID | Name | |
---|---|---|
XYZ-173 | Example 1 | Details |
XYZ-489 | Example 2 | Details |
Don't open the details in a modal window. Have it be a separate page.
Modal windows can't be bookmarked or shared as links. Deep linking can be added to modals, but it's complex. What will show up in the background when the link is followed? How much application state needs to be restored? How will the user be confident that it will work?
Modal windows can't be opened in a new tab. Even if you implement this, you'll be forcing users to duplicate the page underneath.
Modal windows make the Back button confusing. Will it close the modal and return to the page in the background, or return to the page you were before that?
Modal windows are hard to get right.
The "final boss of accessibility".
If you have access to <dialog>
, it's easier —
if you need to support older browsers, good luck.
There's a very good chance the modal window you have in production has
dealbreaking bugs.
Consider if the modal window is really the best choice. There are many reasons modal dialogs are used when they're not appropriate:
To compensate for slow page load
Web apps should pass the "refresh test": If I sneak up behind your user and refresh their tab, their frustration should be negligible and no data should be lost.
Because it seems easy
Many UI toolkits offer modals out-of-the-box. A developer might be tempted to reach for it to zhoozh up the app. Really make it pop, you know.
Because it looked good in the mockup
You're designing a website, not a Figma artboard.
Modal windows can be used for views that don't constitute a "resource" or correspond to a domain entity:
- Alerts
- Confirmation dialogs
- Forms for creating/updating entities
Bonus: RESTful UI
Coming soon
YouDontNeedAModalWindow.dev by Deniz Akşimşek (@[email protected], @[email protected]). Contact [email protected] for suggestions.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK