На странице есть кнопки:
<button id="btn-1" class="about-btn">About</button>
<button id="btn-2" class="about-btn">About</button>
...и так планируется в будущем N кнопок создать...
<button id="btn-N" class="about-btn">About</button>
При клике на каждую кнопку должно всплывать соответствующее кнопке (btn-N) pop-up окно.
Код поп-апов:
<div id="btn-1-popup" class="pop-up">
<p>текст поп-апа №1</p>
<button class="close">X</button>
</div>
...и так у каждой кнопки есть своё окно с уникальным текстом...
<div id="btn-N-popup" class="pop-up">
<p>текст поп-апа №N</p>
<button class="close">X</button>
</div>
И вот, например, при клике на #btn-1 появится окошко #btn-1-popup, при клике на #btn-2 появится окошко #btn-2-popup и тд для N добавленных кнопок. Также в каждом поп-апе есть кнопка закрыть.
Подключил jQuery для этого:
$("#btn-1").click(function() {
$("#btn-1-popup").addClass("visible");
});
$("#btn-1 .close").click(function() {
$("#btn-1-popup").removeClass("visible");
});
...и так к каждой кнопке свой поп-ап...
$("#btn-N").click(function() {
$("#btn-N-popup").addClass("visible");
});
$("#btn-N .close").click(function() {
$("#btn-N-popup").removeClass("visible");
});
А вот если у меня будет много таких кнопок на сайте, например за 50 шт., и к каждой отдельно в jQuery надо прописывать целый блок кода.
Вопрос: как автоматизировать код jQuery или на JS подобное можно реализовать чтобы прописать по шаблону один раз и всё?