Modal vs dialog

Do you know the difference between Modal and dialog ?

No ?! Let's find out

In user interface (UI) design, the terms "modal" and "dialog" are often used interchangeably, but they have distinct meanings:

Modal:

• Definition: A modal is a UI element that creates a temporary, interruptive state in the application, requiring the user to interact with it before they can return to the underlying content or app.
• Key characteristic: Blocks interaction with the rest of the interface until it is closed or interacted with. It forces the user to focus on the modal content and take action (like confirming a decision or filling out a form).
• Common use cases:
  • Confirmation prompts (e.g., "Are you sure you want to delete this?")
  • Alerts or error messages
  • Authentication dialogs (e.g., login screens)
  • Selecting options that are essential before proceeding (e.g., "Save changes?")
• Example: The "Save changes?" dialog in many applications, where you must click "Yes," "No," or "Cancel" before continuing with other tasks.

Dialog:

• Definition: A dialog is a broader term for any UI element that allows for user interaction, typically involving information exchange or decision-making. It may or may not be modal.
• Key characteristic: Does not necessarily block interaction with the rest of the interface. A dialog can be modal, but it can also be non-modal, meaning users can still interact with other parts of the app while the dialog is open.
• Common use cases:
  • Asking for user input (e.g., search or settings dialogs)
  • Information display (e.g., error messages, alerts)
  • Complex forms or multi-step processes
• Example: A dialog box in a word processor asking for specific parameters (e.g., font size or formatting) but still allowing you to interact with other elements in the app if it's a non-modal dialog.

Key Differences:

1. Interaction Blocking:

   • A modal blocks interaction with the main interface until it is dismissed.
   • A dialog may or may not block interaction; it depends on whether it's a modal or non-modal dialog.

2. Use Case:

   • Modals are used for critical decisions, alerts, or actions where you need the user to focus on the modal content before continuing.
   • Dialogs can be used for a variety of interactions, including informational, form submission, or selecting options, with or without blocking the main interface.

Introduction to the dialog Element in HTML

The HTML dialog element provides a simple and efficient way to create modals and dialog boxes. This element is quite flexible, allowing you to customize both the content and the style, while also offering accessibility benefits right out of the box. Let's explore how it works and how you can use it to create effective modals on your web pages.

Basic Structure

The dialog element is very simple: it's just an HTML tag with an optional attribute and some associated JavaScript methods. Here's a basic usage example:

<dialog>
  <!-- Dialog Content -->
</dialog>

By default, a dialog is hidden. To display it, you can add the open attribute, but it's recommended to use the JavaScript methods show() and showModal() to control opening the dialog:

<dialog open>
  <span>You can see me now!</span>
</dialog>

However, it's not advisable to use the open attribute directly, as it creates a non-modal dialog. Instead, you should use the JavaScript methods:

const dialog = document.querySelector("dialog");
dialog.show(); // Opens a non-modal dialog
dialog.showModal(); // Opens a modal dialog

The showModal() method opens a modal dialog, while show() opens a non-modal dialog (a type of popup).

Closing the Dialog

To close a dialog, you can use the close() method. Additionally, if the dialog is modal, it can be closed by pressing the Esc key:

const dialog = document.querySelector("dialog");
dialog.close(); // Closes the dialog

Automatic Accessibility Features

One great advantage of the dialog element is that it automatically handles accessibility features. It applies the correct aria attributes and manages focus, making it much easier to create accessible applications.

Styling the dialog Element

While the dialog element comes with some default styles applied by the browser, it is very easy to customize. Here's an example of a styled dialog using some basic CSS properties:

dialog {
  z-index: 10;
  margin-top: 10px;
  background: green;
  border: none;
  border-radius: 1rem;
}

Additionally, you can style the background of the modal by using the ::backdrop pseudo-element. To modify the backdrop (the area behind the modal), you can apply the following CSS:

dialog::backdrop {
  background-color: rgba(250, 100, 250, 0.25); /* Semi-transparent purple */
}

This makes it easy to create custom modals that fit your website's design.

Advanced Features of the dialog Element

1. Forms Inside the Dialog

You can use forms inside the dialog. If you set the method="dialog" attribute on the form, the dialog will automatically close when the form is submitted, without actually submitting the form data to the server. The most interesting part is that, when reopening the dialog, the form data will still be there.

<dialog>
  <form method="dialog">
    <input type="text" />
    <button type="submit">Submit</button>
  </form>
</dialog>

1. Cancel Buttons

You can add a cancel button in your form that closes the dialog without submitting the form, by using the formmethod="dialog" attribute:

<dialog>
  <form>
    <input type="text" />
    <button formmethod="dialog" type="submit">Cancel</button>
    <button type="submit">Submit</button>
  </form>
</dialog>

1. Close on Click Outside

Although the dialog element does not have this behavior natively, it's easy to add a click event listener to close the dialog when the user clicks outside of it. Here's a simple example to implement this:

dialog.addEventListener("click", e => {
  const dialogDimensions = dialog.getBoundingClientRect();
  if (
    e.clientX < dialogDimensions.left ||
    e.clientX > dialogDimensions.right ||
    e.clientY < dialogDimensions.top ||
    e.clientY > dialogDimensions.bottom
  ) {
    dialog.close();
  }
});

This solution allows the dialog to be closed when clicking outside the modal area, which is common behavior for many modals.

Conclusion

The HTML dialog element provides a simple yet powerful way to implement modals and dialog boxes, with a strong focus on accessibility. It makes it easy to create custom modals without the need for external libraries or complex configuration. By using methods like show(), showModal(), and close(), you can easily control the behavior of your dialog.

Additionally, the ability to style the dialog and its backdrop with CSS makes it even more customizable. With just a few extra features like closing the modal when clicking outside or integrating forms, the dialog element becomes a highly flexible and useful tool for creating interactive elements on your site.

For more information and examples: https://blog.webdevsimplified.com/2023-04/html-dialog/
https://dev.to/iam_timsmith/dialogs-vs-modals-is-there-a-difference-210k

Comments

[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.

[Chandan]

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

For more details : thread link

[José Pablo Ramírez Vargas]

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

[Chandan]

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

[José Pablo Ramírez Vargas]

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.

[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.

[José Pablo Ramírez Vargas]

Read carefully.

"for a fee"

[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

[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.

[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.

[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.

[plutonium239]

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

[A Vidhan Reddy]

Thanks man.