Good time. Faced such a task:

There are 25 buttons, when you click on a button, a modular window appears with a title and text. It is most logical to of course do the unloading of this text and title than copying 25 modular windows and writing a handler for each.

I remembered json, but a question arose. How to make it so that when you click on the buttons for each button displayed its own text in the modular window?

    2 answers 2

    If I understand you correctly, then like this:

    // Устанавливаем нужные переменные и парсим JSON let mWrapper = document.querySelector('#modalWrapper'), mClose = mWrapper.querySelector('#modalClose'), mTitle = mWrapper.querySelector('#modalTitle'), mContent = mWrapper.querySelector('#modalContent'), // В data есть объекты на каждый ID // Если есть ID которого нет в списке data - используем свойство notFound storage = JSON.parse(` { "data": { "id1": { "title": "To be, or not to be: that is the question:", "content": "Быть или не быть, вот в чём вопрос. Достойно ль" }, "id2": { "title": "Whether 'tis nobler in the mind to suffer", "content": "Смиряться под ударами судьбы," }, "id3": { "title": "The slings and arrows of outrageous fortune,", "content": "Иль надо оказать сопротивленье" }, "id4": { "title": "Or to take arms against a sea of troubles,", "content": "И в смертной схватке с целым морем бед" }, "id5": { "title": "And by opposing end them? To die: to sleep;", "content": "Покончить с ними? Умереть. Забыться." }, "id6": { "title": "No more; and, by a sleep to say we end", "content": "И знать, что этим обрываешь цепь" }, "id7": { "title": "The heart-ache and the thousand natural shocks", "content": "Сердечных мук и тысячи лишений," }, "id8": { "title": "That flesh is heir to, 'tis a consummation", "content": "Присущих телу. Это ли не цель" }, "id9": { "title": "Devoutly to be wish'd. To die, to sleep;", "content": "Желанная? Скончаться. Сном забыться." }, "id10": { "title": "To sleep: perchance to dream: ay, there's the rub;", "content": "Уснуть... и видеть сны? Вот и ответ." }, "id11": { "title": "For in that sleep of death what dreams may come", "content": "Какие сны в том смертном сне приснятся," }, "id12": { "title": "When we have shuffled off this mortal coil,", "content": "Когда покров земного чувства снят?" }, "id13": { "title": "Must give us pause. There's the respect", "content": "Вот в чём разгадка. Вот что удлиняет" } }, "notFound": { "title": "Not found", "content": "404" } } `); // Определяется нужный заголовок/контент из JSON и отдаётся на рендер в createWindow function openWindow(el){ let id = el.dataset.winId, data = storage.data["id" + id]; if(!data) data = storage.notFound; createWindow(data, id); } // Устанавливаем данные в виде (в DOM) и отображаем окно function createWindow(data, id){ mTitle.innerHTML = id + ' | ' + data.title; mContent.innerHTML = data.content; mWrapper.style.display = 'flex'; } // Делегируем слушатель рапперу document.querySelector('#wrapper').addEventListener('click', function(e){ let target = e.target; // Если клик по рапперу, но не по кнопке с идентификатором - выходим if(!target.closest('input') || target.dataset.winId === undefined) return; // Запускаем отрисовку окна openWindow(target); }); // Просто слушатели на закрытие окна - по фону и по крестику в углу mWrapper.addEventListener('click', e => e.target === mWrapper ? mWrapper.style.display = 'none' : null); mClose.addEventListener('click', e => mWrapper.style.display = 'none'); 
     #modalWrapper{ position: fixed; display: none; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 98; } #modalWindow{ margin: auto; min-width: 300px; min-height: 200px; background: white; border-radius: 2px; position: relative; padding: 5px; z-index: 99; } #modalClose{ position: absolute; top: 0; right: 5px; cursor: pointer; } #modalTitle{ padding: 5px; font-weight: 800; border-bottom: 1px solid blue; } #modalContent{ padding-top: 5px; } 
     <div id='wrapper'> <input type="button" data-win-id="1" value="Открыть окно"><br /> <input type="button" data-win-id="2" value="Открыть окно"><br /> <input type="button" data-win-id="3" value="Открыть окно"><br /> <input type="button" data-win-id="4" value="Открыть окно"><br /> <input type="button" data-win-id="5" value="Открыть окно"><br /> <input type="button" data-win-id="6" value="Открыть окно"><br /> <input type="button" data-win-id="7" value="Открыть окно"><br /> <input type="button" data-win-id="8" value="Открыть окно"><br /> <input type="button" data-win-id="9" value="Открыть окно"><br /> <input type="button" data-win-id="10" value="Открыть окно"><br /> <input type="button" data-win-id="11" value="Открыть окно"><br /> <input type="button" data-win-id="12" value="Открыть окно"><br /> <input type="button" data-win-id="13" value="Открыть окно"><br /> <input type="button" data-win-id="14" value="Для этого окна нет стандартной записи"><br /> </div> <div id='modalWrapper'> <div id='modalWindow'> <div id='modalClose'>x</div> <div id='modalTitle'>Title</div> <div id='modalContent'>Content</div> </div> </div>

    • And if you need to take data from an external json? how to ask it? - Drop
    • @Drop, well ... pull up via AJAX and put in a variable. - user207618
    • If the memory does not change, it seems like storing large amounts of data in variables is bad. They say the operative takes more. - Drop
    • one
      @Drop, 25 elements is not that big array. Here are 10,000,000 items - yes. But literate people never work with such volumes, only in pieces, if necessary. - user207618

     $(document).ready(function() { $(".click").click(function() { var alert_text = $(this).attr("data-val"); alert(alert_text); }); }); 
     <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> </head> <body> <a class="click" href="#" data-val="Любой текст №1">Button#1</a> <br> <a class="click" href="#" data-val="Любой текст №2">Button#2</a> <br> <a class="click" href="#" data-val="Любой текст №3">Button#3</a> </body> </html>

    • To have 25 buttons you just need to copy them)) - fonjeekay