Как сделать одинаковую функцию для разных действий?

Question

[Lana]

У меня есть такой код https://codepen.io/lanimya/pen/BazaeWZ
Открывает и закрывает модалки разный код.
Я хотела объединить его в функцию и ее подставить, но выходит ошибка в строке 25.
Не знаю как исправить.
По 19 строку - рабочий код.

Сам код взяла отсюда - https://jsfiddle.net/oddhz43x/1/

Comments

[Lana]

Пашенька, Я понимаю что ошибка здесь в this, но не знаю как решить это.
Это весь код, который у меня есть и я не знаю чем мне заменить this.

[Lana]

Пашенька, Спасибо, буду рада, если вы мне поможете

Answer 1

[Stalker_RED]

немного подправил

Comments

[Lana]

К сожалению ваше решение у меня не работает, скорее из-за моей невнимательности, т.к. много элементов у меня на странице, я чуток запуталась.
Но отметила и ваш ответ как решение, т.к. в codepen все работает.Спасибо

[Stalker_RED]

Lana, я немного менял разметку.
например в data-modal я вписывал id с символом #, и удалил несколько неиспользуемых классов

Answer 2

[Пашенька]

Lana, я не понял что за data-img у вас, поэтому заменил разметку, полагая, что это тоже модалка:



Изучайте.

Comments

[Lana]

Все получилось, спасибо!

[Пашенька]

Lana, суперски :v

[Lana]

Пашенька,А не подскажете как по клику на страницу убирать модалку?
https://codepen.io/lanimya/pen/qBNBeBx
В моем случае по клике на overlay

[Lana]

Я попробовала написать вот так

window.onclick = function () {
		over[0].classList.remove("active");
	}

но модалка сразу закрывается

[Пашенька]

Lana, обновил код в ответе.

Вообще, правильно изначально вешать один обработчик клика на весь документ и внутри его уже проверять куда кликнули и от этого плясать, я вам изначально накидал максимально, по моему мнению, понятный для понимания код, но не самый гибкий/эффективный.