DEV Community

Cover image for Build a Modal (Pop up) With  HTML, CSS and JavaScript

Build a Modal (Pop up) With HTML, CSS and JavaScript

Veed - The Hood Developer on August 21, 2021

In this article I will show you how to create a modal that pops up whenever you click a button. The main focus of the article will not be on the CS...
Collapse
 
genakalinovskiy profile image
Gena Kainovskiy • Edited

Good, what do you think about improving your example and to add a11y supporting?

Collapse
 
veedjohnson profile image
Veed - The Hood Developer • Edited

Thank you sir. I'll work on including that and update on the codepen 😊

Collapse
 
bushbass profile image
Alex Nielsen

Thank you for the great demo. Is the overlay just there so you can close the modal by clicking outstide the modal or does it serve some other purpose?

Collapse
 
veedjohnson profile image
Veed - The Hood Developer

You're welcome Alex. Asides that, the overlay also makes the modal more visible. If there were many content on the page, the overlay will blur out other contents making the whole focus on the modal itself

Collapse
 
bushbass profile image
Alex Nielsen

yes, that makes sense. thanks again

Collapse
 
aatmaj profile image
Aatmaj

That is just super!

Collapse
 
veedjohnson profile image
Veed - The Hood Developer

Thank you

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

This has a few accessibility concerns:

  • Keyboard navigation, can't be dismissed by hitting the escape key
  • Focus isn't moved to the modal when it's opened
  • Focus isn't trapped in the modal, so anyone can tab out to the content beneath
  • Focus isn't returned to the button that triggered it, so keyboard users would be left lost once the modal is dismissed
  • Could benefit from some focus styles on the form elements to give feedback to the user where they're at
Collapse
 
wommy profile image
Tommy Williams

why didn't you use html's dialog tag

Collapse
 
veedjohnson profile image
Veed - The Hood Developer

The dialog tag isn't supported on browsers like Safari. You need to lookout for that 👍🏾

Collapse
 
megasanjay profile image
Sanjay Soundarajan

Nice work. Adding some transtitions in so that the modal appearance wouldn't be as abrupt could be a nice touch.

Collapse
 
veedjohnson profile image
Veed - The Hood Developer

Thank you nice idea Sanjay 👍🏾

Collapse
 
veedjohnson profile image
Veed - The Hood Developer

Thank you

Collapse
 
vishuss7 profile image
Vishuss7

What is a modal?

Collapse
 
meo3w profile image
Phil Hasenkamp

Well done!

Collapse
 
tranduythoai14 profile image
teemo_14

thank you, great post

Collapse
 
veedjohnson profile image
Veed - The Hood Developer

Thanks I appreciate 👍🏾

Collapse
 
mfatihgul profile image
Muhammet Fatih Gul

Thanks. Works great!