By
Kaido
Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
<div class="content">
<button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button>
</div>
<div class="modal">
<div class="modal__wrapp" data-target="first">
<div class="modal__content">
<button class="modal__close">Закрыть</button>
модальное окно
<button data-path="policy">Политика</button>
</div>
</div>
<div class="modal__wrapp" data-target="policy">
<div class="modal__content">
<button class="modal__close">Закрыть</button>
политика
</div>
</div>
</div>
.modal {
--transition-time: 0.3s;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
cursor: pointer;
overflow-y: auto;
overflow-x: hidden;
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-time), visibility var(--transition-time);
}
.modal__wrapp {
display: none;
cursor: default;
width: fit-content;
height: fit-content;
}
.modal__content{
position: absolute;
left: 500px;
width: 500px;
height: 500px;
display: flex;
color: white;
flex-direction: column;
text-align: left;
background-color: #000;
}
.modal__content button{
width: 200px;
height: 50px;
margin: 50px 0;
}
.modal.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--transition-time), visibility var(--transition-time);
}
.modal__wrapp.modal-open {
display: flex;
}
.disable-scroll {
position: relative;
overflow: hidden;
height: 100vh;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
.fade {
opacity: 0;
transition: opacity var(--transition-time);
}
.fade.animate-open {
opacity: 1;
transition: opacity var(--transition-time);
}
.fadeInUp {
opacity: 0;
transform: translateY(vw(-100));
transition: opacity var(--transition-time), transform var(--transition-time);
}
.fadeInUp.animate-open {
opacity: 1;
transform: translateY(0);
transition: opacity var(--transition-time), transform var(--transition-time);
}
.modal__wrapp[data-target="policy"] .modal__content{
left: 1050px;
background-color: #000;
opacity: .5;
}
class Modal {
constructor(options) {
let defaultOptions = {
isOpen: () => {},
isClose: () => {},
}
this.options = Object.assign(defaultOptions, options);
this.modal = document.querySelector('.modal');
this.speed = false;
this.animation = false;
this.isOpen = false;
this.modalContainer = false;
this.previousActiveElement = false;
this.fixBlocks = document.querySelectorAll('.fix-block');
this.focusElements = [
'a[href]',
'input',
'button',
'select',
'textarea',
'[tabindex]'
];
this.events();
}
events() {
if (this.modal) {
document.addEventListener('click', function(e){
const clickedElement = e.target.closest('[data-path]');
if (clickedElement) {
let target = clickedElement.dataset.path;
let animation = clickedElement.dataset.animation;
if (clickedElement.classList.contains('modal-close')) {
this.close();
}
let speed = clickedElement.dataset.speed;
this.animation = animation ? animation : 'fade';
this.speed = speed ? parseInt(speed) : 300;
this.modalContainer = document.querySelector(`[data-target="${target}"]`);
this.open();
return;
}
if (e.target.closest('.modal__close')) {
this.close();
return;
}
}.bind(this));
window.addEventListener('keydown', function(e) {
if (e.keyCode == 27) {
if (this.isOpen) {
this.close();
}
}
if (e.keyCode == 9 && this.isOpen) {
this.focusCatch(e);
return;
}
}.bind(this));
this.modal.addEventListener('click', function(e) {
if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) {
this.close();
}
}.bind(this));
}
}
open() {
this.previousActiveElement = document.activeElement;
this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`);
this.modal.classList.add('is-open');
this.disableScroll();
this.modalContainer.classList.add('modal-open');
this.modalContainer.classList.add(this.animation);
setTimeout(() => {
this.options.isOpen(this);
this.modalContainer.classList.add('animate-open');
this.isOpen = true;
this.focusTrap();
}, this.speed);
}
close() {
if (this.modalContainer) {
this.modalContainer.classList.remove('animate-open');
this.modalContainer.classList.remove(this.animation);
this.modal.classList.remove('is-open');
this.modalContainer.classList.remove('modal-open');
this.enableScroll();
this.options.isClose(this);
this.isOpen = false;
this.focusTrap();
}
}
focusCatch(e) {
const focusable = this.modalContainer.querySelectorAll(this.focusElements);
const focusArray = Array.prototype.slice.call(focusable);
const focusedIndex = focusArray.indexOf(document.activeElement);
if (e.shiftKey && focusedIndex === 0) {
focusArray[focusArray.length - 1].focus();
e.preventDefault();
}
if (!e.shiftKey && focusedIndex === focusArray.length - 1) {
focusArray[0].focus();
e.preventDefault();
}
}
focusTrap() {
const focusable = this.modalContainer.querySelectorAll(this.focusElements);
if (this.isOpen) {
focusable[0].focus();
} else {
this.previousActiveElement.focus();
}
}
disableScroll() {
let pagePosition = window.scrollY;
this.lockPadding();
document.body.classList.add('disable-scroll');
document.body.dataset.position = pagePosition;
document.body.style.top = -pagePosition + 'px';
}
enableScroll() {
let pagePosition = parseInt(document.body.dataset.position, 10);
this.unlockPadding();
document.body.style.top = 'auto';
document.body.classList.remove('disable-scroll');
window.scroll({ top: pagePosition, left: 0 });
document.body.removeAttribute('data-position');
}
lockPadding() {
let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px';
this.fixBlocks.forEach((el) => {
el.style.paddingRight = paddingOffset;
});
document.body.style.paddingRight = paddingOffset;
}
unlockPadding() {
this.fixBlocks.forEach((el) => {
el.style.paddingRight = '0px';
});
document.body.style.paddingRight = '0px';
}
}
const modal = new Modal({
isOpen: (modal) => {
console.log(modal);
console.log('opened');
},
isClose: () => {
console.log('closed');
},
});
Question
Aroused
... Another Hard Days Work
Здравствуйте.
Целью создания темы является огромное желание решить мои сложности в работе как веб-девелопер. Мне очень хочется справиться с трудностями, хочется что бы мне кто-то сказал, что «О, да ты не правильно всё делаешь! Ни кто не строит так сайты, не разрабатывает никакой архитектуры, всё уже давно готово! Два месяца возишься с сайтом? Если так работать, то ничего не заработаешь, время обходится слишком дорого! Вот серебряная пуля веб-разработчика! Держи!». Но я понимаю, что нет никакой серебряной пули. Ни кто (по крайней мере добровольно) не предоставит мне свой опыт и инструменты. Но думаю, у меня отличная возможность получить совет у более опытных разработчиков и от тех, кто возможно в начале своего пути испытал подобные проблемы.
Веб-разработкой я увлёкся два года назад. Буквально пару-тройку недель потратил на html и css, всё остальное время старался глубоко освоить javascript, поверхностно PHP и MySQL. Я стал браться за работу: небольшие сайты, портфолио, магазины, hyip-сервисы.
И тут я понял, что я делаю что-то не так.
Основная сложность в том, что все проекты делаю очень долго, бывало даже такое, что к моменту сдачи, элементарно заканчиваются все моральные и финансовые ресурсы. К примеру, последний проект — интернет-витрину я писал два месяца за штуку баксов и последние две недели «ворк-лайна», простите за выражение, не было даже «напожрать». В то время как веб-студии раздают сайты как горячие пирожки. Еще обратил внимание на тз крупного портала, за которое даже и не стал бы браться, но к моему удивлению, два парня из Белоруссии выполнили его за две недели.
Возможно, что моё развитие в этом направлении где-то свернуло не туда. Я стал все свои разработки выделять в отдельную библиотеку (методами). Стараться создавать что-то универсальное, то есть если я делаю сайт-портфолио, я должен создать движок, что бы при необходимости быстро сделать еще 100500 таких сайтов. Так время разработки практически удвоилось, признав свою ошибку, понял, что предусмотреть всё невозможно.
Собственно, ответа на вопрос «Какого черта ты так долго работаешь?» у меня нет. Но если попытаться обратить внимание на некоторые сложности которые я испытываю в своей работе, можно выделить несколько моментов.
И так, в основном, всю нагрузку я переношу на клиента. То есть сервер отдаёт только стили, скрипты и json. Контент собирается уже в браузере. Всё работает очень шустро и я к такому принципу привык. Суть этого момента в том, что если проект большой, то приходится писать большое количество javascript-а. Вот пример без особых деталей: мы создаём объект который отвечает за работу с хешем(route) в нем методы; потом, объект по работе с контентом, в нем тоже методы запроса и методы вывода в dom; потом всякие модули для типов контента(что бы упростить дальнейшую поддержку); обработчики всякие; далее разработка админки, да и забыл, еще нужно перед всем этим спроектировать нормально расширяемую базу, пусть на mysql. С условием, что перечислена только основная часть объектов ядра сайта, в процессе разработки, дойдя до какого-то объема объектов, методов, функций, около 1000-1500 строк кода, всё это в голове превращается в кашу, ты уже не можешь видеть приемлемо детальную, общую картину в голове, что бы ничего не упускать. И дальнейшая разработка превращается в ад. Из этого результат - долго и нудно, а иногда и больно(если сроки сорвать).
Прошу дать совет, знаю, что всё слижком субъективно, но возможно кто-то с этим сталкивался.
Спасибо.
Edited by ArousedLink to comment
Share on other sites
4 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.