Mistakes with Modal Pop up (display:none function in js)

Question

I'm setting up a new personal website.

.Modal Pop up onclick on image, the modal pop up have to change the proprieties from display:none to display:flex.

I've modify my codes structure, in something like this: https://www.youtube.com/watch?v=gLWIYk0Sd38

but still don't work.

Here's a link to a 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

As per my understanding, you need to show popup in the center while scrolling the page. Then, you have to change below CSS properties.

`.bg-modal{ width: 100%; height: 100%; background-color: rgba(63,191,63,0.64); position: fixed; top:0; justify-content: center; align-items: center; display: none;

}`

In the reference, youtube video link has no scroll of the HTML page. When where the page has scroll then it should be use fixed property.

Second Option: Add one class on the body as 'overflow: hidden' when where modal is show and remove that class when modal is hide/display none.