DEV Community

Cover image for Modal vs dialog

Modal vs dialog

Caio on November 10, 2024

Do you know the difference between Modal and dialog ? No ?! Let's find out In user interface (UI) design, the terms "modal" and "dialog...
Collapse
 
louis7 profile image
Louis Liu

Thank you for sharing this!

It would be great if you could embed some interactive demos here or put an MDN link at the end of this article.

Collapse
 
chandan_e69c011b258e09242 profile image
Chandan

Hi,
Can you suggest a free "React multi-select Searchable hierarchy tree dropdown" component in React Web Dev.

For more details : thread link

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

I'll code one for you, for a fee. Reply if interested.

Collapse
 
chandan_e69c011b258e09242 profile image
Chandan

Sure,
Thank you very much brother 🤝🏻🙌🏻.
Much appreciated.

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas • Edited

Ok, if you really are willing to pay for its development, it is $50 US/hour. The hours that I'll charge will include:

  1. The time I spend with you gathering the component's requirements.
  2. The time I spend coding.
  3. The time we spend in any other communication relevant to the work.

We first meet to gather requirements. Then I charge for the meeting. Upon payment, I develop to completion and then demo the product to you. If you're satisfied, I deliver the code to a private repository of yours once payment is fulfilled.

I will give you development time estimates after we define the component requirements.

Thread Thread
 
chandan_e69c011b258e09242 profile image
Chandan

Sorry,
You just said, for free,
So I agreed,
If you can suggest already available components from online is also fine for me, as per your experience.

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

Read carefully.

"for a fee"

Collapse
 
attiqrehman-ar profile image
Attiq Ur Rehman

and when it comes to focus trap the attribute aria-modal="true " and role="modal " will be very helpful in term of drawers and popups #a11y

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

I gave the <dialog> element a fair shot, but it comes with problems. My main problems are:

  1. No DOM mocks it enough (JsDom, happy-dom, etc.).
  2. It makes dropdowns behave weirdly when glass effect is applied to it.
  3. There's a 3rd one but don't remember right now.
Collapse
 
jeffrey_tackett_5ef1a0bdf profile image
Jeffrey Tackett

You know, they are both dialogs, just one is given a property of modal that states that input is restricted to that dialog. Anyone who has used multiple desktop GUI libraries would be able to explain that to you. The biggest difference between a window and a dialog is the purpose of each, all dialogs present controls to change application state that are not part of document that is in the main window of the application. The issue of confusion is one of continuous misuse of each and blurring the lines of each's dedicated use.

Collapse
 
jaseinatl profile image
Jason Burnett

Thanks for the information. Modal dialogs should be avoided at all costs in my opinion. Unless it is critical and only if you do not have a default behavior available, don't use a modal dialog. It's so annoying. Adobe apps are plagued with modals that tell you over and over that you did something wrong before just correcting it without your input. That should simply never happen. A side non-modal error window could be used without breaking your workflow.

Basic rule should be: never use a modal if you don't absolutely have to and only if you can't find a way around it. Never punish your users by popping up modal errors. Terrible UX.

Collapse
 
plutonium239 profile image
plutonium239

Modal -> use case -> authentication "dialog" 🙃

Collapse
 
vidhan_dev profile image
A Vidhan Reddy

Thanks man.