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

Question

mindx @mindx

JavaScript

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

Есть 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>

Вопрос задан более трёх лет назад
74 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 2

4 комментария

mindx @mindx Автор вопроса

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

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

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

Написано более трёх лет назад
mindx @mindx Автор вопроса

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

Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

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

Написано более трёх лет назад

3 комментария

mindx @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 @tyzberd

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

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

Написано более трёх лет назад
mindx @mindx Автор вопроса

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

Написано более трёх лет назад