This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
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()
})
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-14T09:38:54+00:00) Day 15: the :modal pseudo-class. Retrieved from https://www.scien.cx/2022/10/14/day-15-the-modal-pseudo-class/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.