Как изменить цвет фона модального окна?

Мне было интересно, как мне изменить цвет фона моего модального окна после его отображения, например следующее: Как изменить цвет фона модального окна? Я хочу, чтобы цвет фона покрывал всю страницу, а не только окрашивал само модальное окно. Я попытался:

    .modal {
        background-color: rgb(255, 0, 0);
}

Но это привело, как я уже сказал, к цветному модальному модулю, а не ко всей странице. Вот фрагмент для справки:

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>

html css

19.03.2022 15:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте это в своем CSS

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

19.03.2022 15:34

Ответ принят как подходящий

Чтобы изменить цвет фона для элемента <dialog>, вам нужно стилизовать псевдоэлемент ::backdrop следующим образом:

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

В идеале, вы бы хотели, чтобы цвет был полупрозрачным, а не сплошным красным, поэтому вместо этого вы можете использовать rgba

.modal::backdrop {
  background-color: rgba(255, 0, 0, 0.5);
}

Ссылки на соответствующие документы:

19.03.2022 15:48

Другие вопросы по теме

Justify-content выравнивает однострочный текст, но не когда текст занимает несколько строк

Как получить соотношение сторон в HTML и CSS?

Условно переопределить стиль AntD Select в CSS

Текст не помещается в изображение на Bootstrap

Почему div растягивается правильно, а не изображение?

Как я могу добавить стиль к элементу в javascript?

Как заставить тумблер использовать boostrap 5?

Редактировать кнопку веб-страницы с помощью CSS

Реализуйте дочерний элемент div с полосами прокрутки, чтобы отображать большой контент, сохраняя при этом родительский элемент и другие элементы одного уровня

Сделайте так, чтобы столбцы всегда были в одной строке

Как изменить цвет фона модального окна?

Ответы 2

Другие вопросы по теме

Похожие вопросы