javascript - 模态窗口弹出
问题描述
大家下午好!
我寻求帮助,我遇到了一个问题,我不知道如何解决......
通常,在 3 个元素内有一个轮播。每个元素都有一个按钮,单击时会弹出一个模式。一切正常,一切正常,但只有一个。由于某种未知原因,它没有在第一个元素中开始打开模态窗口,我请求知识渊博的帮助......我发布了一些html和js。
轮播元素的结构:
<section id="rewiews" class="rewiews">
<div class="container lock-padding">
<h2 class="section-rewiews-title">отзывы</h2>
</div>
<div class="container-swiper lock-padding">
<div class="rewiews-container">
<div class="rewiews-text-container">
<h3 class="rewiews-text-container-title">наргиз</h3>
<p class="rewiews-text-container-des">Отличное агентство! Быстро и качественно, денег много не взяли. Заказал разработку корпоративного дизайна, всю работу сделали в срок. Чувствуется профессионализм и бережное отношение к клиентам!</p>
<p class="rewiews-text-container-company">ТОО “Класная компания”</p>
<div class="letter">
<a href="#popup" class="letter-btn popup-link">благодарственное письмо</a>
</div>
</div>
<div class="rewiews-text-container">
<h3 class="rewiews-text-container-title">наргиз</h3>
<p class="rewiews-text-container-des">Отличное агентство! Быстро и качественно, денег много не взяли. Заказал разработку корпоративного дизайна, всю работу сделали в срок. Чувствуется профессионализм и бережное отношение к клиентам!</p>
<p class="rewiews-text-container-company">ТОО “Класная компания”</p>
<div class="letter">
<a href="#popup" class="letter-btn popup-link">благодарственное письмо</a>
</div>
</div>
<div class="rewiews-text-container">
<h3 class="rewiews-text-container-title">наргиз</h3>
<p class="rewiews-text-container-des">Отличное агентство! Быстро и качественно, денег много не взяли. Заказал разработку корпоративного дизайна, всю работу сделали в срок. Чувствуется профессионализм и бережное отношение к клиентам!</p>
<p class="rewiews-text-container-company">ТОО “Класная компания”</p>
<div class="letter">
<a href="#popup" class="letter-btn popup-link">благодарственное письмо</a>
</div>
</div>
</div>
</div>
</section>
弹出结构:
<div id="popup" class="popup">
JS代码:
const popupLinks = document.querySelectorAll('.popup-link');
const body = document.querySelector('body');
const lockPadding = document.querySelectorAll(".lock-padding");
let unlock = true;
const timeout = 800;
if (popupLinks.length > 0) {
for (let index = 0; index < popupLinks.length; index++) {
const popupLink = popupLinks[index];
popupLink.addEventListener("click", function (e) {
const popupName = popupLink.getAttribute('href').replace('#', '');
const curentPopup = document.getElementById(popupName);
popupOpen(curentPopup);
e.preventDefault();
});
}
}
const popupCloseIcon = document.querySelectorAll('.close-popup');
if (popupCloseIcon.length > 0) {
for (let index = 0; index < popupCloseIcon.length; index++) {
const el = popupCloseIcon[index];
el.addEventListener('click', function (e) {
popupClose(el.closest('.popup'));
e.preventDefault();
});
}
}
function popupOpen(curentPopup) {
if (curentPopup && unlock) {
const popupActive = document.querySelector('.popup.open');
if (popupActive) {
popupClose(popupActive, false);
} else {
bodyLock();
}
curentPopup.classList.add('open');
curentPopup.addEventListener("click", function (e) {
if (!e.target.closest('.popup__content')) {
popupClose(e.target.closest('.popup'));
}
});
}
}
function popupClose(popupActive, doUnlock = true) {
if (unlock) {
popupActive.classList.remove('open');
if (doUnlock) {
bodyUnLock();
}
}
}
function bodyLock() {
const lockPaddingValue = window.innerWidth - document.querySelector('.rewiews').offsetWidth + 'px';
if (lockPadding.length > 0) {
for (let index = 0; index < lockPadding.length; index++) {
const el = lockPadding[index];
el.style.paddingRight = lockPaddingValue;
}
}
body.style.paddingRight = lockPaddingValue;
body.classList.add('lock');
unlock = false;
setTimeout(function () {
unlock = true;
}, timeout);
}
function bodyUnLock() {
setTimeout(function () {
if (lockPadding.length > 0) {
for (let index = 0; index < lockPadding.length; index++) {
const el = lockPadding[index];
el.style.paddingRight = '0px';
}
}
body.style.paddingRight = '0px';
body.classList.remove('lock');
}, timeout);
unlock = false;
setTimeout(function () {
unlock = true;
}, timeout);
}
document.addEventListener('keydown', function (e) {
if (e.which === 27) {
const popupActive = document.querySelector('.popup.open');
popupClose(popupActive);
}
});
(function () {
// проверяем поддержку
if (!Element.prototype.closest) {
// реализуем
Element.prototype.closest = function (css) {
var node = this;
while (node) {
if (node.matches(css)) return node;
else node = node.parentElement;
}
return null;
};
}
})();
(function () {
// проверяем поддержку
if (!Element.prototype.matches) {
// определяем свойство
Element.prototype.matches = Element.prototype.matchesSelector ||
Element.prototype.webkitMatchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector;
}
})();
解决方案
推荐阅读
- r - 在 R 中组合链接数据行的最佳方法是什么?
- python - 无法打开插入另一张图片的图片
- c# - 如何在c#中更改列表中二维数组中特定项的值
- junit4 - Power Mockito 显示 org.powermock.modules.junit4.common.internal.impl.AbstractCommonPowerMockRunner 错误无法解决
- git - Git svn - 每个文件夹一个 git repo(拉一次)
- mysql - 带有 SUM 的 MySQL 内连接显示不正确的值
- python - 如何使用 python 或 bash 为文件中的每个值添加值“1”
- php - 如何在 cakephp 中正确构建这个 mysql 连接查询?
- javascript - 在 JavaScript If..Else 语句中使用逻辑运算符“&&”时得到“未定义”结果
- php - 将数组重组为关联数组