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;
}
<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()
})
Further reading
Overview: 100 Days Of More Or Less Modern CSS