Popup laten verdwijnen

Door Jorn Reed op 13-06-2022 15:17

2.647 views

Hoi, ik heb een hele simpele popup. Die ik laat tonen bij een onclick, met dat click event toggle ik gewoon met een .hide class.

Graag vroeg ik mij af hoe ik er voor kan zorgen dat wanneer de popup actief is (dus geen .hide class bezit). Dat het niet uit maakt waar je klikt (zolang het niet de popup zelf/z'n children zijn), dat de popup weer de class .hide krijgt?


const editEmployee = document.getElementById('editEmployee');
const userListPopup = document.getElementById('userListPopup');
if(editEmployee !== null){
	editEmployee.addEventListener('click', (e) => {
		e.preventDefault();
		userListPopup.classList.toggle('hide');
	});
}

Jan R

14-06-2022 07:09

Gewoon aan de popup-tag zelf een onclick toevoegen
userListPopup.classList.remove('hide');

J Jorn Reed

14-06-2022 09:32

Jan R op 14/06/2022 07:09:16

Gewoon aan de popup-tag zelf een onclick toevoegen
userListPopup.classList.remove('hide');

Klopt dat had ik al, het ging mij meer om het sluiten, uiteraard komt er gewoon een kruis icoon met een event listener die add('hide') weer doet. Zoals in jouw voorbeeld, maar ik wil die zelfde actie ook als je buiten de modal klikt. Moet ik dan gewoon de parent van de modal targetten? Dus de zwarte achtergrond die de site donker maakt voor de popup?

Jan Koehoorn

14-06-2022 21:14


document.addEventListener('click', function(event) {
    document.getElementById('userListPopup').classList.toggle('hide');
}, false);

Reageren

Inloggen om te reageren