WDX-180
Web Development X
Modals
What is a Modal?
Modals are windows that overshadow or overlap the overall visible window. They are essential components in modern web design, providing a convenient way to display important information, gather user input, or showcase additional content.
HTML has a native <dialog> element for modals. MDN describes it as a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. The <dialog> element, a semantic HTML element, has an open attribute that hints to the browser that the modal is active. Also, the HTMLDialogElement interface provides methods that help manipulate the <dialog> element.
Nowadays, a simple short video can prove to be helpful for learning something new, below you can watch the awesome Kevin Powell give an introduction to the modal component!
- dialog = the easiest way to make a popup modal
- Level: Beginner
- Duration: 10mins
- Captions: Yes
Styling a Modal
Since it can be boring and not suited for developers like ourselves, to create just a simple modal or pop up window, we need to be able to give it our own style! Luckily, the :modal pseudo-class allows us to style modals nice and easily!
Hop on to the official MDN’s documentation page about the :modal CSS pseudo-class or even better, take a quick look to the following video, by whom other than Kevin Powell!
- Styling modals just got easier!
- Level: Beginner
- Duration: 4mins
- Caption: Yes