Почему вызывается только один popup?

Question

[mindx]

Есть 3 модельных окна, с разным содержимым.
Но при клике вызывается содержимое только 1 окна (естественно последнего), почему?

<script>
		$('.popup-link').click(function(){
			var popup_id = $('#' + $(this).attr("rel"));
			$(popup_id).fadeIn();
			$('.popup-overlay').fadeIn();
		});
		$('.popup-close').click(function(){
			$('.popup-overlay').fadeOut();
			$('body').css('overflow','none');
		})
	</script>

Answer 1

[ThunderCat]

может по тому что они у вас вызываются по id, который в dom должен быть уникальным?

Comments

[mindx]

id везде разный

[ThunderCat]

mindx, положите на фиддл, а то от телепатии зубы мудрости болят.

[mindx]

ThunderCat, :D
Чет на codepen не работает вообще, но уверяю у меня на дестктопе хотя бы один, но запускается :D
https://codepen.io/Mindx/pen/OZKKYg
id совподает со значение rel

[ThunderCat]

mindx, на кодепене работает, не понятно только почему вы решили что открывается один? вроде все 2 открываются, просто друг на друга наложены

Answer 2

[tyzberd]

пропишите разный rel для popup-link и id для окон как в rel

Comments

[mindx]

В этом и не понятка, тк все прописано. Везде пронумерован от 1 до 3

<button class="popup-link" rel="popup1">
							<img src="img/portfolio/1.jpg" alt="">
							<div class="img-hover">
								<h3 class="img-title">Всем привет</h3>
							</div>
						</button>
<div class="popup-overlay" id="popup1">
					<div class="popup">
						<div class="popup-close">
							<button class="popup-btn" >
								<span></span>
							</button>
						</div>
						<div class="popup-img">
							<img src="img/portfolio/1.jpg" alt="">
						</div>
						<div class="popup-content">
							<h3>Название</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum minima labore reprehenderit laudantium delectus, ullam cum, et commodi, tenetur ratione amet nemo repellendus quibusdam provident.</p>
						</div>
					</div>
				</div>

[tyzberd]

конечно,
$(popup_id).fadeIn();
$('.popup-overlay').fadeIn();
сначала показали по ид, потом по классу и закрыли по классу.
так не должно быть

или отдельно div c ид, а popap-overlay генерирует js, как сделано в bootstrap, или открвать только по id

[mindx]

tyzberd, .... нет слов. Спасибо большое