Как реализовать 20+ поп-апов на странице?

Question

[K G]

Здравствуйте, на странице имеется очень много маленьких одинаковых кнопок, которые должны по клику вызывать небольшой попап рядом с ней. Все кнопки одинаковые, но поп-апы разные, поэтому привязываться по id к каждому не вариант(их может быть и 10 и 50 штук). По коду, блок поп-ап идет сразу после кнопки, как реализовать, чтобы по клику на кнопке открывался поп-ап идущий сразу после той кнопки, на которой был клик.
С JS совсем плохо, с JQ еще более менее, но реализовать не получилось.

Answer 1

[Виктор Виктор]

<button type="button">Показать попап</button>
<div class="popup" style="display: none;">Приветик</div>

$(document.body).on('click', 'button', function(e){
    e.preventDefault();
    var $button = $(this);
    var $popup = $button.next('.popup');

    $popup.fadeIn();
});

Comments

[K G]

Виктор Виктор Большое спасибо, работает, нужно еще его закрывать по клику вне его области.
я дополнил ваш скрипт вот так, но по клику он открывается и сразу же закрывается, где косяк?

$(document.body).on('click', '.popup-toggle', function(e){
    e.preventDefault();
    var $toggle = $(this);
    var $popup = $toggle.next('.popup-block');

    $popup.css('display', 'block');
	
	if ($(event.target).closest(".popup-block").length) return;
	$(".popup-block").fadeOut(300);
	indexClick = 0;
	event.stopPropagation();
});

[K G]

Виктор Виктор ну только без indexClick = 0; это из другого скрипта.

[Виктор Виктор]

Дело в том что событие навешано на '.popup-toggle' и скрипт срабатывает только когда по кнопке кликнули

Надо разделить на два события:
1 - клик по кнопке - показываем
2 - клик по боди - прячем

$(document.body).on('click', '.popup-toggle', function(e){
e.preventDefault();
e.stopPropagation();

var $toggle = $(this);
var $popup = $toggle.next('.popup-block');

$popup.css('display', 'block');
});

$(document.body).on('click', function(e) {
if (!$(event.target).closest(".popup-block").length){
e.preventDefault();
$('.popup-block:visible').fadeOut(300);
}
});

[Виктор Виктор]

codepen.io/toptalo/pen/YqdmWx

Answer 2

[Денис Князев]

codepen.io/axaxaman/pen/BKvgbY

может как-нибудь так попробовать ?

Answer 3

[Виталий]

Все кнопки одинаковые, но поп-апы разные, поэтому привязываться по id к каждому не вариант(их может быть и 10 и 50 штук).

что значит - нельзя ? что мешает тем же JS гененировать ID или data атрибут с каким то параметром.
Потом использовать один шаблон попапа и туда передавать аяксом данные которые надо там выводить.

Answer 4

[K G]

Дополнил скрипт Виктор Виктор следующим кодом:

$(document).mouseup(function (e) {
    var popupblock= $(".popup-block");
    if (popupblock.has(e.target).length === 0){
        popupblock.hide();
    }
});

Все прекрасно работает, всем спасибо