В мобильной версии сайта не открывались модальные окна. Методом проб я выяснил, что в телефоне почему-то по другому обрабатывается e.target. В мобильной версии чтобы считать атрибут нужно написать e.target.parentElement. Можете, пожалуйста объяснить, почему так происходит. Пока эту проблему я залепил подорожником, но вероятность срабатывания скрипта на телефоне все равно 60-80%.
Вот сам скрипт:
//modal window
let modal = document.getElementById('works-description'),
closeModal = document.getElementById('close'),
openElement = document.getElementsByClassName('openingFigure'),
headline = document.getElementById('headline'),
taskDescription = document.getElementById('task_description'),
deadlinesDescription = document.getElementById('deadlines_description'),
budget = document.getElementById('budget'),
modalImg = document.getElementById('modal-img'),
modalHref = document.getElementById('modal-href');
for (let i = 0; i < openElement.length; i++) {
openElement[i].addEventListener('click', function (e) {
//заплатка
let handler = window.screen.width > 768 ? e.target : e.target.parentElement;
let modalTitle = handler.getAttribute('data-headline'),
task = handler.getAttribute('data-task'),
deadline = handler.getAttribute('data-deadline'),
dataBudget = handler.getAttribute('data-budget'),
dataImg = handler.getAttribute('data-img'),
dataHref = handler.getAttribute('data-href');
modalImg.src = dataImg;
headline.innerHTML = modalTitle;
taskDescription.innerHTML = task;
deadlinesDescription.innerHTML = deadline;
budget.innerHTML = dataBudget;
modalHref.href = dataHref;
modal.style.display = 'flex';
});
}
closeModal.onclick = function () {
modal.style.display = 'none';
}
На пк без заплатки все замечательно работало.
Заранее спасибо за помощь.
PS.
Вот html:
<section>
<div class="container">
<div id="scroll-myWorks" name="scroll-myWorks" class="my-works-container">
<h2 class="block-headline">Несколько моих последних работ</h2>
<div class="p-my-works-container">
<p>Кликните на картинку, чтобы посмотреть подробности.</p>
</div>
</div>
<div id="modalButtonsContainer" class="work-cards-container">
<figure data-img="img/mini-batsam-bg.png" data-headline="Batsam Cofee" data-task="Сделать редизайн страницы" data-deadline="5 дней" data-budget="5" data-href="http://coffee.podarok.click/" class="openingFigure wow fadeInLeft batsam-figure">
<figcaption>
<h2>Batsam</h2>
<p>Дизайн, верстка</p>
</figcaption>
</figure>
<figure data-img="img/moroz-bg.png" data-headline="Сайт Деда Мороза" data-task="Сделать частичный редизайн страницы" data-deadline="1 день" data-budget="1" data-href="https://www.moroz.club/" class="openingFigure wow fadeInUp moroz-figure">
<figcaption>
<h2>Сайт Деда Мороза</h2>
<p>Верстка</p>
</figcaption>
</figure>
<figure data-img="img/obogrevatel-bg.png" data-headline="Obogrevatel.ru" data-task="Верстка карточки товара и натяжка на интернет-магазин" data-deadline="3 дня" data-budget="1.5" data-href="https://obogrevatel-ua.com/" class="openingFigure wow fadeInRight obogrevatel-figure">
<figcaption>
<h2>Карточка товара</h2>
<p>Верстка, натяжка</p>
</figcaption>
</figure>
<figure data-img="img/wooder-bg.png" data-headline="WOODER.ru" data-task="Верстка сайта по PSD макету" data-deadline="2 дня" data-budget="5" data-href="https://snigur-stepan.000webhostapp.com/" class="openingFigure wow fadeInUp wooder-figure">
<figcaption>
<h2>Магазин мебели</h2>
<p>Верстка по PSD макету</p>
</figcaption>
</figure>
</div>
<!--modal window-->
<div id="works-description" class="fade">
<div class="works-description-block">
<a id="close">✖</a>
<div class="img-block">
<img src="img/" id="modal-img" alt="image">
</div>
<div class="works-description-text">
<h2 id="headline">Site name</h2>
<h3>Задача</h3>
<p id="task_description"></p>
<h3>Сроки</h3>
<p id="deadlines_description"></p>
<h3>Бюджет: <span id="budget"></span> тыс. рублей</h3>
<a id="modal-href" href="https://obogrevatel-ua.com/" target="_blank">Перейти на сайт</a>
</div>
</div>
</div>
<!--/modal window-->
</div>
</section>
Простой
