R
If I understand correctly, that's how it is:// Устанавливаем нужные переменные и парсим 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>