Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Разный текст в модальных окнах (https://javascript.ru/forum/dom-window/76317-raznyjj-tekst-v-modalnykh-oknakh.html)

renton88 28.12.2018 00:15

Разный текст в модальных окнах
 
Всем привет (и с наступающим)!

Такой вопрос: есть несколько элементов разбросанных по странице вида:

<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:

рони 28.12.2018 00:44

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")
    })
});

рони 28.12.2018 00:46

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.