Как привязать попап к id?

Question

[Игорь]

codepen
Как правильно привязать кнопку к попапу что бы при создании 2х элементов со своим попапом открывался сопутствующий кнопке по id или ещё какому либо показателю

Answer 1

[aloky]

data-target и тд, не помогает?
Посмотрите как сделано тут

Answer 2

[Антон Швец]

так штоле?
https://codepen.io/anon/pen/vaBRrO

Answer 3

[FalseCode]

Решение
Просто добавляешь атрибут. Потом по этому атрибуту ищешь нужный элемент и все)

jQuery(document).ready(function($){
	//open popup
	$('.cd-popup-trigger').on('click', function(event){
		event.preventDefault();
     var popup = $(this).attr('href');
		$('.cd-popup').each(function(){
      if($(this).attr('data-popup') === popup){
         $(this).addClass('is-visible');
         }
    });
   
	});
	
	//close popup
	$('.cd-popup').on('click', function(event){
		if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
			event.preventDefault();
			$(this).removeClass('is-visible');
		}
	});
	//close popup when clicking the esc keyboard button
	$(document).keyup(function(event){
    	if(event.which=='27'){
    		$('.cd-popup').removeClass('is-visible');
	    }
    });
});

<a href="#0" class="cd-popup-trigger">View Pop-up</a>
<a href="#1" class="cd-popup-trigger">View Pop-up</a>

<div class="cd-popup" role="alert" data-popup='#0'>
	<div class="cd-popup-container">
		<p>Are you sure you want to delete this element?</p>
		<ul class="cd-buttons">
			<li><a href="#0">Yes 0</a></li>
			<li><a href="#0">No 0</a></li>
		</ul>
		<a href="#0" class="cd-popup-close img-replace">Close</a>
	</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->
<div class="cd-popup" role="alert" data-popup='#1'>
	<div class="cd-popup-container">
		<p>Are you sure you want to delete this element?</p>
		<ul class="cd-buttons">
			<li><a href="#1">Yes 1</a></li>
			<li><a href="#1">No 1</a></li>
		</ul>
		<a href="#0" class="cd-popup-close img-replace">Close</a>
	</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->

Answer 4

[Максим Тимофеев]

<button type="button" data-kakoito-pokazatel="1" data-toggle="wow">жмякалка1</button>
<button type="button" data-kakoito-pokazatel="2" data-toggle="wow">жмякалка2</button>
<button type="button" data-kakoito-pokazatel="3" data-toggle="wow">синенькая жмякалка</button>

$('[data-toggle="wow"]').on('click',function(){
    var id = $(this).attr('data-kakoito-pokazatel');
    if( id != 'undefined'){
        alert('Жмяк зафиксирован по кнопке с каким-то показателем - ' + id);
    }else{
        alert('Отсутствует какой-то показатель, ничем не могу помочь');
    }
});