How to change modal's background color?-CodePudding

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  >Open</button>

    <dialog >
        Hi! I'm 15Rabi
        <button  >Close</button>
    </dialog>
</body>
<script src="script.js"></script>

</html>

CodePudding user response：

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

CodePudding user response：

Try this in your CSS

     dialog::backdrop {
        background-color: rgb(255, 0, 0);
     }