Kevin Powell - Community•2y ago

Pop up model issue when clicking outside

Hey guyss I dont know what seems the problem here since Im new to JS. I wantt to close the modal when click outsside of it. Codepen attached: https://codepen.io/pen?template=Poygmdy

CodePen

...

9 Replies

Mannix•2y ago

are you sure you are targeting the right element. when you hit submit button you remove the modal-bg class but you relay on a element with that class to close the modal and it doesn't exist in the dom at that point

sebinOP•2y ago

I really dont have a idea. whats on my mind is this bg-active class when I put a arrow function it will remove it. do you have a solution for this?

Mannix•2y ago

something like this

  document.querySelector('.modal-score').addEventListener('click', ()=>{document.querySelector('.modal-score').classList.add('modal-bg')})

  document.querySelector('.modal-score').addEventListener('click', ()=>{document.querySelector('.modal-score').classList.add('modal-bg')})

sebinOP•2y ago

huh its really working but I dont get it. I dont see any remove classlist.

Mannix•2y ago

modal-bg class has display: none when you hit submit you remove that so modal shows up to hide the modal you need to add that class back so the display of the modal goes to none

sebinOP•2y ago

ow so its reverse to what Im planning to.

Mannix•2y ago

you did it backwards normally you put display none on modal and then add class with display block to show it

sebinOP•2y ago

yes this is what Im thinking right now hahaha. Thankyouu.

Mannix•2y ago

Gaming

Programming

Pop up model issue when clicking outside