Разный текст в модальных окнах
Всем привет (и с наступающим)!
Такой вопрос: есть несколько элементов разбросанных по странице вида: <span class="popup" id="type1">Кнопка</span> <div class="popup" id="type2">Еще кнопка</div> <button class="popup" id="type3">Тоже элемент</button> <div class="modal"> <div class="first">first block</div> <div class="second">second block</div> <div class="third">third block</div> </div> По кликам на любой из этих элементов открывается модальное окошко. var popup = document.querySelectorAll('.popup'), modal = document.querySelector('.modal'), modalBtn = document.getElementById('btn-send'), modalClose = document.querySelector('.modal-close'); for(i=0; i<popup.length; i++) { popup[i].addEventListener("click", function() { modal.classList.add('active'); }); }; modalClose.addEventListener("click", function() { modal.classList.remove('active'); }); Вопрос в следующем: как отследить какой был id у кликнутого элемента .popup, чтобы исходя из этого заменить содержимое некоторых тегов внутри модального окна, к примеру через innerHTML с <div class="first">first block</div> на <div class="first">new text</div> Надеюсь не слишком путано изложил:-? Гран мерси заранее всем добрым людям.:thanks: |
renton88,
document.addEventListener("DOMContentLoaded", function() { var popup = document.querySelectorAll(".popup"), modal = document.querySelector(".modal"), modalBtn = document.getElementById("btn-send"), modalClose = document.querySelector(".modal-close"); [].forEach.call(popup, function(node, i) { node.addEventListener("click", function() { var html = "first block"; if (i == 1) html = "new text"; document.querySelector(".first").innerHTML = html; modal.classList.add("active") }) }); modalClose.addEventListener("click", function() { modal.classList.remove("active") }) }); |
renton88,
document.addEventListener("DOMContentLoaded", function() { var popup = document.querySelectorAll(".popup"), modal = document.querySelector(".modal"), modalBtn = document.getElementById("btn-send"), modalClose = document.querySelector(".modal-close"); [].forEach.call(popup, function(node, i) { node.addEventListener("click", function() { var html = "first block"; if (node.id == "type2") html = "new text"; document.querySelector(".first").innerHTML = html; modal.classList.add("active") }) }); modalClose.addEventListener("click", function() { modal.classList.remove("active") }) }); |
Часовой пояс GMT +3, время: 05:11. |