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.

yo!

dialog {
  border: 10px solid aqua;
}

:modal {
  border-style: dotted;
  border-color: fuchsia;
  padding: 4rem;
}
<dialog>
  yo!

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

<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 => {
  dialog.show()
})

showModalButton.addEventListener('click', e => {
  dialog.showModal()
})

closeButton.addEventListener('click', e => {
  dialog.close()
})

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS