I was wondering how would I go around changing my modal’s background color after it has displayed, like the following: 
I want the background color to cover the whole page and not just color the modal itself. I tried:
.modal {
background-color: rgb(255, 0, 0);
}
But this resulted as I said in the colored modal and not the whole page.
Here’s a snippet for refrence:
const modal = document.querySelector(".modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close-button");
openModal.addEventListener("click", () => {
modal.showModal();
});
closeModal.addEventListener("click", () => {
modal.close();
});.modal {
background-color: rgb(255, 0, 0);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button open-button" >Open</button>
<dialog class="modal">
Hi! I'm 15Rabi
<button class="button close-button" >Close</button>
</dialog>
</body>
<script src="script.js"></script>
</html>
>Solution :
To change the backdrop color for a <dialog> element you needs to style the ::backdrop pseudo element like this:
.modal::backdrop {
background-color: rgb(255, 0, 0);
}
Ideally though you’d want to to be a semi transparent color, not solid red, so you might want to use rgba instead
.modal::backdrop {
background-color: rgba(255, 0, 0, 0.5);
}
Links to the relevant docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop