Приветствую, подскажите как реализовать, имеется карта свг, на ней регионы,

при клике на определенный регион должна выскакивать модалка с инфой, соответственно, стиль модалки один, а контент разный, то есть динамически как-то надо. Как сделать?

в чем конкретно проблема?

описал..

вы описали задачу, а не ваш подход к реализации

2 раза сказал, как реализовать?

ну так какие идеи есть? что в них смущает? я хочу вам помочь, но хочу, чтоб люди сами решали задачи свои, так что начните сами, а я подскажу

карта рабочая уже имеется, при ховере все работает, но надо модалки сделать - http://td-vector.al-dev.ru/regiony-prisutstviya/

делегирование клик на карту => смотрим куда => открываем соответствующую области модалку

Соглы

Делаешь он клик эвент на карту там берёшь из event текущую feature и берёшь у неё id это id твоего региона и в ней хранится тип модалки который надо открыть далее диспатчишь событие по открытию этой модалки

новик в js, половину не выкупаю

Описал, ты даже не сказал что за карту используешь, " Когда то Хемингуэй поспорил что напишет самый короткий рассказ"

внимательней будь

Ну подхватывай)

const tabs = document.querySelectorAll(".tab");// ссылки по которым кликаешь добавить каждой атрибут такого вида data-tab="#tab-1" const tabsContent = document.querySelectorAll(".tabs-content");// карты. которые показываются по клику добовить каждой атрибут id="tab-1" tabs.forEach(tab=>{ tab.addEventListener("click", ()=>{ let currentTab = tab; let attrId = currentTab.dataset.tab; let currentContent = document.querySelector(attrId); if(! currentTab.classList.contains("tab--active")){ tabs.forEach(tab=>{ tab.classList.remove("tab--active"); }) tabsContent.forEach(item=>{ item.classList.remove("tabs-content--active"); }) currentContent.classList.add("tabs-content--active"); tab.classList.add("tab--active"); } }) }); Не благодари, только не морочь головы людям перед Новым годом😁

const tabs = document.querySelectorAll(".tab");// ссылки по которым кликаешь добавить каждой атрибут такого вида data-tab="#tab-1" const tabsContent = document.querySelectorAll(".tabs-content");// карты. которые показываются по клику добовить каждой атрибут id="tab-1" tabs.forEach(tab=>{ tab.addEventListener("click", ()=>{ let currentTab = tab; let attrId = currentTab.dataset.tab; let currentContent = document.querySelector(attrId); if(! currentTab.classList.contains("tab--active")){ tabs.forEach(tab=>{ tab.classList.remove("tab--active"); }) tabsContent.forEach(item=>{ item.classList.remove("tabs-content--active"); }) currentContent.classList.add("tabs-content--active"); tab.classList.add("tab--active"); } }) });

Он же говорил при клике на карту а не хй пойми куда

знакомый чел , не в обиду ему - имеет проблемы с коммуникацией, но я за время общения с ним обзавелся внутренним интерпретатором😁 так что вроде понял в чем суть проблемы