Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313

Несколько модалок на js

03.12.2024, 12:04. Показов 4557. Ответов 66
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Заюзал вот этот скрипт для модалок

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//modal window
function Modal(e){
    this.modal = document.querySelector('.modal');
    this.overlay = document.querySelector('.overlay');
    this.close_btn = document.querySelector('.close_btn');
    let popup = this;   
 
    this.open = function(){
        popup.overlay.classList.add('m_open');
        popup.modal.classList.add('m_open');
    }
 
    this.close = function(){
        popup.overlay.classList.remove('m_open');
        popup.modal.classList.remove('m_open');
    }
 
    this.overlay.onclick = popup.close;
    this.close_btn.onclick = popup.close;
}
 
let pop = new Modal();
 
document.querySelector('.m_btn').onclick = function(e){
    pop.open();
    e.preventDefault();
}
Но он вроде как на одну модалку только, а у меня на сайте их несколько, немного дополнил его, что бы сработала вторая + ещё одна кнопочка закрытия была

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//modal window 2x
function Modal(e){
  this.modal = document.querySelector('.m_login');
  this.modal2 = document.querySelector('.m_application');
  this.overlay = document.querySelector('.overlay');
  this.close_btn = document.querySelector('.close_btn');
  this.close_btn2 = document.querySelector('.cb2');
  this.close_btn3 = document.querySelector('.ma_close');
  let popup = this; 
  this.open = function(){
    popup.overlay.classList.add('m_open');
    popup.modal.classList.add('m_open');
  }
  this.open2 = function(){
    popup.overlay.classList.add('m_open');
    popup.modal2.classList.add('m_open');
  }
  this.close = function(){
    popup.overlay.classList.remove('m_open');
    popup.modal.classList.remove('m_open');
    popup.modal2.classList.remove('m_open');
  }
  this.overlay.onclick = popup.close;
  this.close_btn.onclick = popup.close;
  this.close_btn2.onclick = popup.close;
  this.close_btn3.onclick = popup.close;
}
 
let pop = new Modal();
document.querySelector('.m_btn_1').onclick = function(e){
  pop.open();
  e.preventDefault();
}
 
let pop2 = new Modal();
  document.querySelector('.m_btn_2').onclick = function(e){
  pop2.open2();
  e.preventDefault();
}
Собственно вопрос, на сколько я криво его доработал и можно ли как то укоротить? Сложность в том, что если окон дофига будет, то портянка ещё та получится + бывает к примеру 5 кнопок, что бы открыть одну и ту же модалку ну и чуть меньше, несколько, что бы закрыть одну и ту же.
И на каждую писать типа такой комбинации

JavaScript
1
2
this.close_btn3 = document.querySelector('.ma_close');
this.close_btn3.onclick = popup.close;
В общем нужна оптимизация для нескольких окон и нескольких кнопок, для одного и того же окна.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!-- modals -->
 
<div class="overlay"></div>
 
<div class="modal m_login">
  <span class="close_btn"></span>
</div>
 
<div class="modal m_application">
  <span class="close_btn cb2"></span>
</div>
<!-- end of modals -->
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
03.12.2024, 12:04
Ответы с готовыми решениями:

Не отображается крестик у модалок в сафари
Хотя область в том месте кликабельная и по клику как и надо происходит закрытие модального окна , просто не отображается крестик, я как...

Блокировка прокрутки body для модалок
Доброго времени суток! Кто может помочь в чем проблема? Есть сайд, но когда он активен нужно что сам контент под ним был 'fixed. ...

Построить ε-НКА, допускающий язык, состоящий из цепочек, имеющих ноль или несколько а, ноль или несколько b, ноль или несколько с.
Построить ε-НКА, допускающий язык, состоящий из цепочек, имеющих ноль или несколько а, ноль или несколько b, ноль или несколько с.

66
 Аватар для voraa
1305 / 1328 / 193
Регистрация: 21.01.2024
Сообщений: 6,135
10.12.2024, 09:51
Студворк — интернет-сервис помощи студентам
Какое то мышление у вас странное. Или терминология
Цитата Сообщение от Segera Посмотреть сообщение
В чем отличие идентификатора от линка?
Идентификатор задает "имя" элемента.
А линк задает url, по которому надо перейти. В этом url может быть и hash (якорь). Это якорь может быть задан как идентификатором элемента, так и элементом <a> с атрибутом name.
Цитата Сообщение от Segera Посмотреть сообщение
Но как может вести куда-то <a href="#ID">, кроме к индентификатору?
На какой то раздел сайта.
HTML5
1
2
3
4
5
<a href="#glava4">См. главу 4</a>
....
....
 <section id="glava4">
<h2>Глава 4</h2>
Цитата Сообщение от Segera Посмотреть сообщение
В чем может выявиться проблема использования в линке идентификатора?
Ни в чем. А кто этот вопрос задает?

Добавлено через 2 минуты
Цитата Сообщение от Segera Посмотреть сообщение
До понятия якорь, где ограничение больше некуда.
Какие ограничения?
1
Заблокирован
10.12.2024, 10:28
Я вам всем спорящим могу показать, что такое на самом деле плохой подход. Это когда какой-нибудь урл на сайте не обрабатывается и выдает 500-ые ошибки вместо 404 или перенаправления. Вот это на самом деле плохой подход. Показываю пример. Остальное несущественные мелочи.
0
 Аватар для voraa
1305 / 1328 / 193
Регистрация: 21.01.2024
Сообщений: 6,135
10.12.2024, 11:08
Цитата Сообщение от barabar Посмотреть сообщение
или перенаправления.
А что плохого в перенаправлениях? Бывают случаи, когда они нужны и полезны.
0
Заблокирован
10.12.2024, 11:14
Цитата Сообщение от voraa Посмотреть сообщение
А что плохого в перенаправлениях? Бывают случаи, когда они нужны и полезны.
Я так и сказал. Нужны или перенаправления или 404. Только ни в коем случае не 500. Это повлияет на индексацию.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
10.12.2024, 13:35  [ТС]
Цитата Сообщение от barabar Посмотреть сообщение
Только ни в коем случае не 500
Видал её совсем недавно, причём на каком то крупном и популярном магазе вроде как, не знаю правда что она обозначает, я обычно всем 404 страницы верстаю, моя любимая прям по наполнению за фуллпрайс.
Поглядел на ваши дебаты по поводу тега 'a' забавный факт, но когда то давно как раз таки в сети был очень популярный jq скрипт этих попапов, как раз таки с id и href, не знаю от куда он там взялся, но судя по всему ни только я его нагуглил и использовал в куче проектов, хотя с моими навыками гуглирования я и дохлую рыбу в пустыне найду. А кстати вот он, места для ностальгии ОплачЕНЫ:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//modal
$('[data-modal=modal]').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('data-pop');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('.mask').css({'width':maskWidth,'height':maskHeight});
    $('.mask').fadeIn(0);
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $(id).fadeIn(200);
});
$('.window .close, .mask').click(function (e) {
    e.preventDefault();
    $('.mask, .window').hide();
});
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a data-modal="modal" data-pop="#pop">Регистрация</a>
 
<!-- modal window -->
<div class="boxes">
  <div id="pop" class="window">
   <span class="close"></span>
   
   *****Контент*****
   
  </div>
  <div class="mask"></div>
</div>
</body>
<!-- end of modal window -->
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.4);
    display: none;
}
.boxes .window {
    display: none;
    max-width: 545px;
    width: 100%;    
    background: #ffffff;
    position: fixed;
    left: 0;
    top: 0; 
    z-index: 9999;
}
.boxes #pop{
    
}
0
Заблокирован
10.12.2024, 13:40
Цитата Сообщение от Mailo Посмотреть сообщение
не знаю правда что она обозначает
Это значит, что программист накосячил на бэкенде
0
 Аватар для voraa
1305 / 1328 / 193
Регистрация: 21.01.2024
Сообщений: 6,135
10.12.2024, 13:55
Цитата Сообщение от Mailo Посмотреть сообщение
А кстати вот он, места для ностальгии ОплачЕНЫ:
Ну а почему не так? Все проблем с доступностью меньше будет
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button data-modal="modal" data-pop="#pop">Регистрация</button>
 
<!-- modal window -->
<div class="boxes">
  <div id="pop" class="window">
   <button class="close"></button>
   
   *****Контент*****
   
  </div>
  <div class="mask"></div>
</div>
</body>
<!-- end of modal window -->
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('[data-modal=modal]').click(function(e) {
    //e.preventDefault();
    var id = $(this).attr('data-pop');
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    $('.mask').css({'width':maskWidth,'height':maskHeight});
    $('.mask').fadeIn(0);
    var winH = $(window).height();
    var winW = $(window).width();
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
    $(id).fadeIn(200);
});
$('.window .close, .mask').click(function (e) {
    //e.preventDefault();
    e.stopPropagation();
    $('.mask, .window').hide();
});
Ну и CSS подправить
0
10.12.2024, 14:58

Не по теме:


за jQuery на проектах не панишат?
просто вопрос, никаких холиваров
(ну и за var)

0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
10.12.2024, 15:43  [ТС]
pincet, набирают обороты запросы на вёрстку с ванильным js, с чем это связанно - я без понятия, может с популяризацией react и vue или там AI какой негодует. Как правило заказчик предварительно уведомляет, что jq он не примет. Мои предыдущие 500+ проектов, они все с jq, за редким исключением, так сказать внёс небольшой вклад в jq загрузи интернетов.

var не знаю чем плох в принципе, но я let и const юзаю только, возможно у var даже осталась какая то узкая сфера применения.

Что касаемо скрипта выше, я его вообще с гугла стырил, минимум дописал и ксс доработал ну и юзал повсеместно. Он так то посмотреть довольнотаки колхозный. Вот с этими строками вроде где то проблемы были, вообще это надо через css делать.

JavaScript
1
2
$(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);
0
Заблокирован
10.12.2024, 15:55
Цитата Сообщение от Mailo Посмотреть сообщение
набирают обороты запросы на вёрстку с ванильным js, с чем это связанно - я без понятия
Возможно, с тем, что нет смысла грузить дополнительную библиотеку и замедлять загрузку страницы. Время jQuery уже прошло. Аминь
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
10.12.2024, 16:31  [ТС]
Да всяких мелких лендингов, которых у меня большинство по ходу это дело с нагрузкой на сервер вообще не заботит. А я то всё ждал, когда к нам прямо из соединительных штатов приедет http2, что бы спрайты перестать делать, а приехал svg и я перестал.
0
 Аватар для voraa
1305 / 1328 / 193
Регистрация: 21.01.2024
Сообщений: 6,135
10.12.2024, 16:43
Цитата Сообщение от barabar Посмотреть сообщение
что нет смысла грузить дополнительную библиотеку и замедлять загрузку страницы.
Типа реакт или вью меньше ?
0
Заблокирован
10.12.2024, 16:50
Цитата Сообщение от Mailo Посмотреть сообщение
приедет http2
Уже давно пришел. Только проснулся?
Прописать в nginx одну строчку и готово.
Миниатюры
Несколько модалок на js  
0
Заблокирован
10.12.2024, 17:03
Цитата Сообщение от voraa Посмотреть сообщение
Типа реакт или вью меньше ?
Я не пользовался. Но насколько я знаю, это уже совсем другой уровень абстракции. А jQuery помогала стабильной работе с разными браузерами. Сейчас же такая проблема отпала. Значит и jQuery уже не нужна. У меня кстати на одном сайте до сих пор стоит... лень переписывать код. Я подгружаю, используя атрибут defer.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
10.12.2024, 17:10  [ТС]
Цитата Сообщение от barabar Посмотреть сообщение
Уже давно пришел.
А что мне никто не сказал Ну это объясняет, почему спрайты никто не просит, наверное.
Цитата Сообщение от voraa Посмотреть сообщение
реакт или вью
Вот эти бы сразу оба два куданить свалили бы с фронтедовских рынков, пролубэкендерские темы, яб готов на ваниле начать всё делать ну и ещё Tailwind со всякими Тильдами с собой прихватили.
0
Заблокирован
10.12.2024, 17:17
А меня больше всего напрягло то, что гугл рекомендовал все картинки заменять на формат *.webp У меня на сайте 300.000 картинок JPG. Я переформатировал их все в WebP, но и старые тоже не удалил, что бы не было косяков с ошибками индексации. Теперь у меня на сайте уже 600 тысяч картинок, но профита от этого никакого не получил. Даже хуже стало. Больше Гуглу доверия нет
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3864 / 1771 / 434
Регистрация: 14.03.2022
Сообщений: 4,463
10.12.2024, 17:26
Цитата Сообщение от Mailo Посмотреть сообщение
пролубэкендерские темы
Почему вдруг так про "реакт или вью"?
0
10.12.2024, 17:27  [ТС]

Не по теме:

Да я перестал доверять ему ещё на моменте, когда он придумал эти качели со шрифтами, swap там и.д. Мне вся клиентура разом, мол удаляй это мелькание шрифтов на загрузке, а чо сами просили оптимизировать и гуглспидировать

0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3864 / 1771 / 434
Регистрация: 14.03.2022
Сообщений: 4,463
10.12.2024, 17:28
Цитата Сообщение от barabar Посмотреть сообщение
Больше Гуглу доверия нет
А ты им письмо гневное напиши...
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
10.12.2024, 17:50  [ТС]
Цитата Сообщение от krvsa Посмотреть сообщение
Почему вдруг так про "реакт или вью"?
Да вещи хорошие, особенно реакт, для меня просто пока сложные, ну и заказ с ними мимо летит.

Добавлено через 1 минуту
Хочу тут немного укоротить динамическую часть моего нового скрипты с попапокнами, но js мне говорит пока фиг тебе.
В общем идея такая:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function addModal(b, m){
  document.querySelector(b).addEventListener('click', () => {
    document.querySelector(m).classList.add('opened')
    document.body.classList.add('no_scroll')
  })
}
 
function addModal('.m_btn_1', '.m1')
function addModal('.m_btn_2', '.m2')
 
/* document.querySelector('.m_btn_1').addEventListener('click', () => {
  document.querySelector('.m1').classList.add('opened')
  document.body.classList.add('no_scroll')
})
document.querySelector('.m_btn_2').addEventListener('click', () => {
  document.querySelector('.m2').classList.add('opened')
  document.body.classList.add('no_scroll')
}) */
Добавлено через 5 минут
Пока такой довольно неплохой варик на несколько попапов с персональным крестиком для каждого окна. Интересно на этом codepene долго храняться эти скрипты, надеюсь дольше чем на моём компе снова начнётся балет Щелкунчик.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
10.12.2024, 17:50

Зависимость между двумя ячейками: несколько водителей и несколЬко автомобилей
Подскажите, пожалуйста, как сделать зависимость между двумя ячейками? Например, когда выбираю какую-либо фамилию в ячейке...

Несколько клавиш частично не работают несколько минут после включения пк
Доброго времени суток уважаемые пользователи форума. Имеется бюджетная клавиатура Defender Mayhem Gk-360DL. Имитирует механическую...

Подскажите как преобразовать несколько чисел из одной строки, и несколько int переменных
Доброго времени, ломаю голову над задачей второй день, но что то ускользает от меня. суть задачи: написать функцию, которая принимает в...

Несколько регулярных выражений в параметр или как вырвать сразу несколько слов из контекста
Добрый день. Запутался в регулярных выражениях. Получается достигнуть цели, дублируя кусок кода несколько раз. Вот из такого текста(он...

Как прикрепить несколько картинок на несколько людей в списке БД
У меня есть готовая БД, Нужно сделать чтобы при выборе строки в DBGrid, выходила картинка в DBImage. и так на несколько людей в списке. что...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
60
Ответ Создать тему
Новые блоги и статьи
Транслитерация текста с кириллицы на латиницу (вариант №2)
Maks 13.11.2026
Обновленная версия ранее созданной обработки. Добавлено: - Проверка исходного текста на кириллицу, через обращение к стандартной функции "ТолькоКириллицаВСтроке" из общего модуля. . .
Часы с термометром и праздничным календарем
yariko 12.11.2026
Сегодня мы рассмотрим как можно сделать отличные многофункциональные часы. Итак, поставим конкретную задачу: разработать часы с календарем, двумя термодатчиками, выводом поздравительных сообщений. . .
Транслитерация текста с кириллицы на латиницу (вариант №1)
Maks 11.11.2026
Решил облегчить жизнь себе и коллегам админам при создании электронных почтовых ящиков для пользователей, в результате написал обработку "Транслитерация текста" с кириллицы на латиницу, а в ней. . .
Книги по геймдизайну, левел-дизайну, игровым механикам и проектированию игрового опыта
8Observer8 08.11.2026
Содержание блога | English Version 1. 2003 - 06 - Designing Virtual Worlds (1st Edition) Автор: Richard A. Bartle | Объем: 768 стр. Ссылки: Amazon . . .
Родители токсичные абьюзеры по отношению к своим детям ругают их оскорбляют не любят
zorxor 08.11.2026
Жить в атмосфере постоянных оскорблений, критики и холодности со стороны родителей — это тяжелое и болезненное испытание, которое оставляет глубокие эмоциональные раны. Токсичное и абьюзивное. . .
Как только я захожу к себе в свою комнату я сразу же с себя снимаю свои трусы. Ответ от Джемени ИИ.
zorxor 08.11.2026
Джемени, как только я захожу к себе в свою комнату я сразу же с себя снимаю свои трусы. Многие люди, возвращаясь домой, сразу переодеваются в максимально свободную одежду или вовсе предпочитают. . .
Паттерн очереди действий/команд (Action / Command Queue). Система очереди действий и кат-сцен с SDL3 Callbacks, cglm и OpenGL
8Observer8 07.11.2026
Содержание блога | English Version Руководство для начинающих по реализации паттерна очереди действий/ команд (Action / Command Queue) на C++ (C++20) с использованием официального SDL3 Callbacks. . .
Проверка полного ФИО в типовом справочнике
Maks 07.11.2026
Решение реализовано в конфигурации КА2, на примере справочника "КонтактныеЛицаПартнеров". Задача: Запрет инициалов. Не допускаеть использование сокращений вида "И. И. ", "И. И. ", "И И" и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru