Posted on Sep 21 You may hear developers talking about dialogs and modals on websites as being similar things. Are they really the same though? The answer is: sort of. They do have similar appearances and functionality, but with a key difference. In this blog post, I'll explore modals and dialogs and explain the difference while showing you how they can be used natively in the browser.While both dialogs and modals can appear similar, there are different reasons for using each. First we'll discuss what they are and how they're used and then we'll discuss how they're different.Dialogs and modals can serve similar purposes: to display some data or collect some data outside the flow of the normal document. This could be a form collection, a call-to-action, or something similar that you want to be front-and-center for a user. Typically, people refer to these things as "popups".I'm sure you've seen them all over the web if you've been using the internet for any amount of time. Typically, people complain about these because they can be disruptive when using a website. Because of this, it's important to use them in this fashion sparingly. One of the two items is more disruptive than the other though...The way in which dialogs and modals differ has to do with how it allows the user to interact with the document when it's open. What does that mean? Let's talk about each one:Understanding the differences between the two will allow you to make the right choice about which option is best for your situation. As a general rule, you should reach for the Dialog unless it's absolutely necessary to prevent the user from interacting with other elements.In years past, building dialogs and modals consisted of nesting divs inside of divs while applying some styles to make it look and behave a certain way using javascript and css. While some of this is still necessary due to it's interactive nature, the dialog has come a long way since then.One of the big problems around the dialog components of old are a lack of accessibility. They just weren't easy to understand and use with screen readers. There was a role="dialog" attribute which could be applied, but many times accessibility is unfortunately an afterthought.Despite this, the web has evolved quite a bit in the last several years to make accessibility much more "baked in" through the use of semantic elements. Because of this, we have a dialog element in HTML5 which takes care of a lot of these things for us. In addition to being accessible, the dialog element gives us the ability to use it as both a dialog and a modal, although the way to do this may not be super intuitive.A dialog element is hidden by default and accepts children to be displayed inside the dialog. It also accepts an open attribute which decides whether the dialog should be visible to the user or not. Past that, it's got all the same attributes you would expect on a generic HTML element (class, id, aria-stuff, etc).Now that we've discussed what attributes a dialog element can have, we should probably talk about how to actually use the thing. I mentioned that there is an open attribute available on a dialog element. By changing this value, you can show and hide the dialog box. That's great, but how do you actually do that? First, lets create a function which toggles the dialog between open and closed:When using HTML, the dialog will be shown if the open attribute is present, regardless of what the value is. In the function above, I am looking to see if the dialog has the open attribute set. If so, it removes the attribute but if the open attribute is missing, it adds it with a value of true.Next, I will create the dialog itself. For now, I will just create a basic dialog element with some content inside:Finally, I want a button the user can click to control the dialog. Clicking the button once will show the dialog and clicking the button a second time will hide the dialog.Once this is built out, your result should look something like this:Although my HTML code will be the same for the modal (except for the dialog ID), the function being called will be different for a modal. This is because the browser provides a method which comes built-in to handle the modal's behavior. Unlike the dialog, a modal requires two separate buttons to handle opening and closing the dialog. This is because any buttons outside the dialog will be inaccessible while it is open. Because of this difference, I will create functions for each task:The button and dialog should look pretty much the same as the previous code except for an additional button to close the modal:With this code in place, clicking the button should display something like this:You may notice that a key difference between the dialog and modal is a backdrop which covers all of the content behind the modal. This is what makes a modal different because it prevents the user from accessing the page content until the modal is closed. This backdrop doesn't look very interesting though. Lucky for us, there is a pseudoselector that can be used to target and style the backdrop so it better matches your use case. You can use the ::backdrop pseudoselector like this:It's worth noting that the backdrop only appears on modals, so the pseudoselector will not have any impact on the dialogs you're displaying.I mentioned earlier that accessibility is a big benefit we get from the dialog element in HTML5, but what does that mean? There is a role="dialog" attribute which can be assigned to an element to tell a screen reader that the item is a dialog. In addition, an aria- tag should be added to tell the screen reader whether the element is visible or not.By using the dialog element, the browser takes care of these things for us! So instead of the code above, we can simply write:While the two attributes may not seem like a big deal, it may not always be something you think of when you create a dialog or modal. Using a dialog element allows us to focus on building cool things instead of getting into the nitty gritty and sometimes guessing on which aria- attributes are appropriate.As previously discussed, my dialogs are pretty lame. I think it's time to add some styles. In the spirit of Max Goof, let's build a modal he might have looked at for his favorite singer, Powerline. First, I'll set some CSS variables based on some of the palettes I've seen online:Now that I have some colors ready to go, it's time to start styling. Here's some styles I'm using for all the things that aren't the dialogs:I would like to style the dialog as well as the backdrop according to the palette I've chosen so it doesn't stick out like a sore thumb. Below are the styles I'll be using for the dialog:Now my modal looks like this:You can see the full code for this at https://github.com/iamtimsmith/dialog-vs-modal and you can visit the finished site at https://dialog-vs-modal-nine.vercel.appDialogs and modals have become a common part of the web, but it's not always clear which one is appropriate for a given situation. Now you'll know that a dialog is used when the user should still be able to interact with the main page content, while a modal should be used when the dialog should prevent the user from accessing the rest of the page. With this in mind, you can hopefully build better and more accessible user experiences when using a popup.Have questions? You can find me on Twitter at @iam_timsmith.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Herminio Torres - Sep 19 Odumosu Matthew - Sep 19 François Roget - Sep 15 Yoav Ganbar - Sep 18 Once suspended, iam_timsmith will not be able to comment or publish posts until their suspension is removed. Once unsuspended, iam_timsmith will be able to comment and publish posts again. Once unpublished, all posts by iam_timsmith will become hidden and only accessible to themselves. If iam_timsmith is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Tim Smith. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag iam_timsmith: iam_timsmith consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging iam_timsmith will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.