Day 15: the :modal pseudo-class

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

There are two methods you can use to open a <dialog> element, show() and showModal(). show() opens a dialog on top of the rest of the content, but you can still interact with content beneath. showModal() opens a modal dialog with a backdrop on top of the rest of the content, and you can’t interact with the rest of the page.

You can use the :modal pseudo-class to style modal dialogs (dialogs opened via showModal()) differently.


dialog {
border: 10px solid aqua;

:modal {
border-style: dotted;
border-color: fuchsia;
padding: 4rem;

<button class="closeButton">Close</button>

<button class="showButton">Show</button>
<button class="showModalButton">Show modal</button>
const showButton = document.querySelector('.showButton')
const showModalButton = document.querySelector('.showModalButton')
const closeButton = document.querySelector('.closeButton')
const dialog = document.querySelector('dialog')

showButton.addEventListener('click', e => {

showModalButton.addEventListener('click', e => {

closeButton.addEventListener('click', e => {

See on CodePen.

Further reading