Ошибки с модальным всплывающим окном (отображение: нет функции в js)

Question

Я настраиваю новый личный веб-сайт.

. Модал Всплывающее окно на изображении, модальное всплывающее окно должно изменить свойства с дисплея: нет для отображения: гибкий.

Я изменил свою структуру кодов примерно так: https://www.youtube.com/watch?v=gLWIYk0Sd38

, но все еще не работает.

Вот ссылка на CodePen CODEPEN :

https://codepen.io/tta1eu/pen/gyGwOm

document.getElementById('Avatar15').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";

});

document.querySelector('.close').addEventListener("click", function() {
    document.querySelector('.bg-modal').style.display = "none";
});

Answer 1

Насколько я понимаю, вам нужно показывать всплывающее окно в центре при прокрутке страницы.Затем вы должны изменить ниже CSS свойства.

`.bg-modal {width: 100%;высота: 100%;цвет фона: rgba (63 191,63,0,64);положение: фиксированное;верх: 0;justify-content: центр;align-items: center;display: none;

} `

В ссылке на ссылку на видео YouTube нет прокрутки HTML-страницы.Когда на странице есть прокрутка, следует использовать фиксированное свойство.

Второй вариант: Добавить один класс на теле как «переполнение: скрытый», когда модальное шоу, и удалить этот класс.когда модальный режим - скрыть / не отображать

Answer 2

у вас нет ссылки / кнопки с ID = Avatar15, в которой есть событие click для отображения во всплывающем окне

добавление в HTML:

<a id="Avatar15">Click</a>