Доброго времени суток.
Есть несколько элементов и по клику на них должно открываться всплывающее окно.Окна одинаковые, единственная разница в том, что в зависимости от того, на какой элемент нажали, меняется контент всплывающего окна.
Кто подскажет как это реализовать на js?
Понимаю что это примерно как с табами, но на табах уже изначально на одном элементе стоит active и делается через флаги.
Модалку вызываю таким образом
$(document).ready(function(){
$('.share__desc-popup').on('click', function(e){
e.preventDefault();
$('.popup__call').fadeIn();
});
$('.popup__close').on('click',function(){
$('.popup__call').fadeOut();
});
$(this).keydown(function(eventObject){
if (eventObject.which == 27){
$('.popup__call').fadeOut();
}
});
$('.popup').on('click',function(e){
if(e.target.closest('.popup__wrap') == null) {
$('.popup__call').fadeOut();
}
});
});
Сама модалка вот
<div class="popup popup__call">
<div class="popup__dialog">
<div class="popup__wrap">
<div class="popup__content">
<div class="popup__close">
<div class="popup__close-btn"></div>
</div>
<h2 class="popup__header">
Блок</h2>
<div class="popup__desc">
<p>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum temporibus vel minus aliquam vitae error adipisci labore, consectetur sequi veritatis beatae iste? Odio tenetur sit ullam ducimus quia labore culpa!</span>
<span>Quam rem molestias facilis. Consequatur et minus deserunt harum aperiam recusandae cum voluptates voluptate, architecto aliquid assumenda ratione id neque perferendis eos ut inventore obcaecati accusantium ex labore expedita rem.</span>
<span>Dignissimos asperiores consectetur ratione quos? Laboriosam, animi magni quibusdam id commodi incidunt, quia ut autem nisi doloribus earum deserunt! Hic assumenda quaerat vel vero adipisci numquam, nisi aut ipsam repudiandae!</span>
</p>
</div>
</div>
</div>
</div>
</div>
А вот элементы по клику на которые нужно чтобы выплывала модалка и в зависимости от того какая разная
<div class="card__info" id="cardInfo">
<h4 class="card__mini-title card__mini-title_margin_bottom">информация</h4>
<ul class="card__info-list">
<li class="card__info-item" data-item="1">
<div class="share__desc-wrap share__desc-popup">
<svg class="share__desc-icon">
<use xlink:href="/assets/images/icon/sprait.svg#circle"></use>
</svg>
</div>
<div class="card__info-text">Круг</div>
</li>
<li class="card__info-item" data-item="2">
<div class="share__desc-wrap share__desc-popup">
<svg class="share__desc-icon">
<use xlink:href="/assets/images/icon/sprait.svg#card"></use>
</svg>
</div>
<div class="card__info-text">Кредит</div>
</li>
<li class="card__info-item" data-item="3">
<div class="share__desc-wrap share__desc-popup">
<svg class="share__desc-icon">
<use xlink:href="/assets/images/icon/sprait.svg#cub"></use>
</svg>
</div>
<div class="card__info-text">Доставка</div>
</li>
<li class="card__info-item" data-item="4">
<div class="share__desc-wrap share__desc-popup">
<svg class="share__desc-icon">
<use xlink:href="/assets/images/icon/sprait.svg#reverse"></use>
</svg>
</div>
<div class="card__info-text">Обновить</div>
</li>
<li class="card__info-item" data-item="5">
<div class="share__desc-wrap share__desc-popup">
<svg class="share__desc-icon">
<use xlink:href="/assets/images/icon/sprait.svg#shield"></use>
</svg>
</div>
<div class="card__info-text">Защита</div>
</li>
</ul>
</div>
