@deniskins23

Как изменять контент всплывающих окон в зависимости от того, какая кнопка нажата?

Доброго времени суток.
Есть несколько элементов и по клику на них должно открываться всплывающее окно.Окна одинаковые, единственная разница в том, что в зависимости от того, на какой элемент нажали, меняется контент всплывающего окна.
Кто подскажет как это реализовать на 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>
  • Вопрос задан
  • 1089 просмотров
Решения вопроса 1
OTCloud
@OTCloud
Программирование и Архитектура ПО
Причем тут табы и модалки? Сделайте просто функцию генерации модалки. Передавайте в неё нужный контент и вставляйте сбилженую модалку в какой нибудь <div id="my-modal-box"></div>

Вот простой пример:
HTML
<button id="btn-1">First button</button>
<button id="btn-2">Second button</button>
<div id="my-modal-box">
  This is may be modal window component, use css ...
</div>


JS
function buildModal(containerID, content) {
  document.getElementById(containerID).innerHTML = content;
}

document.getElementById("btn-1").onclick - function() {
  buildModal("my-modal-box", "Content from first button")
}

document.getElementById("btn-2").onclick - function() {
  buildModal("my-modal-box", "Content from second button")
}

/* showModal() and hideModal() write yourself */
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Wulzin
@Wulzin
Web Dev
Попробуйте использовать Event Deligation Pattern
https://learn.javascript.ru/event-delegation

Суть проста - вешает один листенер на контейнер и в коде просто проверяете куда кликнул юзер. От того какой сработает event.target будет срабатывать разные обработчики.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы