I'm trying to figure out how to change the background color of my modal once it's displayed, similar to this example: https://i.stack.imgur.com/fOUDZ.png. I want the background color to cover the entire page and not just the modal itself. When I tried setting the background-color property for the .modal class, it only colored the modal itself rather than the whole page. Here's a snippet of my code for reference:
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>