Kevin Powell - Community•14mo 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•14mo 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

sebin•14mo 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•14mo 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')})

sebin•14mo ago

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

Mannix•14mo 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

sebin•14mo ago

ow so its reverse to what Im planning to.

Mannix•14mo ago

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

sebin•14mo ago

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

Mannix•14mo ago

Gaming

Programming

Pop up model issue when clicking outside