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

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

03.12.2024, 12:04. Показов 4535. Ответов 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
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
4000 / 2174 / 833
Регистрация: 13.03.2010
Сообщений: 7,074
10.12.2024, 18:03
Студворк — интернет-сервис помощи студентам
Цитата Сообщение от Mailo Посмотреть сообщение
var не знаю чем плох в принципе, но я let и const юзаю только, возможно у var даже осталась какая то узкая сфера применения.
Почитайте на досуге о различиях var и let. Ну так, чтобы в курсе быть.

Цитата Сообщение от Mailo Посмотреть сообщение
Как правило заказчик предварительно уведомляет, что jq он не примет.
И правильно, нечего помои на сайты тянуть.
0
 Аватар для voraa
1305 / 1328 / 193
Регистрация: 21.01.2024
Сообщений: 6,135
10.12.2024, 18:05
Цитата Сообщение от Mailo Посмотреть сообщение
Пока такой довольно неплохой варик
Я только не пойму, почему window.onload, а не DOMContentLoaded?
1
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
10.12.2024, 19:21  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Я только не пойму, почему window.onload, а не DOMContentLoaded?
Да сам не знаю от куда он взялся поменял, нефиг загрузки картинок дожидаться.
0
164 / 51 / 5
Регистрация: 03.06.2020
Сообщений: 613
11.12.2024, 08:07
Цитата Сообщение от voraa Посмотреть сообщение
Это якорь может быть задан как идентификатором элемента, так и элементом <a> с атрибутом name.
ну так и меня было об этом. Уверенный, настолько простые понятия нет смысла раскрывать. Тем не менее, это говорит о том, всё-таки надо
Цитата Сообщение от gogolik Посмотреть сообщение
В вашей некомпетентности и незнании простейших понятий.
Цитата Сообщение от barabar Посмотреть сообщение
Я вам всем спорящим могу показать, что такое на самом деле плохой подход. Это когда какой-нибудь урл на сайте не обрабатывается и выдает 500-ые ошибки вместо 404 или перенаправления. Вот это на самом деле плохой подход. Показываю пример. Остальное несущественные мелочи.
Пожалуй этот пример не подходит для обработки одного #, который находится на этом же ресурсе.

Всё-таки, если о сути. В чем проблема, если убрать не кошерность и ай-яй - гуру сообщество на своем съезде мудро покачали головой про незя. Использовать переход в линке на идентификатор. Понятно, варианты могут быть не для одной модалки.
Проблема может снижать быстродействие, краш, уязвимость системы и т.д.
Словом где это в воображаемом best practices по верстке. Где есть правила по сamelCase
Никого не напрягает надеюсь переход в топ href="#top" или
HTML5
1
2
3
<a href="mailto:nowhere@mail.ru">Отправить сообщение в никуда</a>
<a href="#section1">Переход к разделу 1</a>
<h2 id="section1">Раздел 1</h2>
Кстати, из учебного курса по фронтенду. Они в своих академиях не в теме?
0
 Аватар для voraa
1305 / 1328 / 193
Регистрация: 21.01.2024
Сообщений: 6,135
11.12.2024, 10:06
Цитата Сообщение от Segera Посмотреть сообщение
если убрать не кошерность и ай-яй - гуру сообщество на своем съезде мудро покачали головой про незя.
Еще бы понять, какие гуру, когда был съезд и что незя?
Цитата Сообщение от Segera Посмотреть сообщение
Понятно, варианты могут быть не для одной модалки.
А при чем тут модалка?
Семантический смысл <a href=> перейти куда то , а не открыть что то.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
11.12.2024, 13:40  [ТС]
Цитата Сообщение от Segera Посмотреть сообщение
<a href="mailto:nowhere@mail.ru">Отправить сообщение в никуда</a>
<a href="#section1">Переход к разделу 1</a>
Дык это повсеместно и це кошерно, переключение на мэйлагента и якоря, сюдаж телефон tel добавить можно и ватсап с телегой. Не уверен, но по другому эти штуки не сделаешь, посему они в виде таких "исключений" для тега <a>.
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
4000 / 2174 / 833
Регистрация: 13.03.2010
Сообщений: 7,074
11.12.2024, 15:24
Segera, вы лишь продолжаете показывать своё невежество и тотальное непонимание темы, о которой идёт речь. Перестаньте позориться.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
11.12.2024, 15:24

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

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
67
Ответ Создать тему
Новые блоги и статьи
Часы с термометром и праздничным календарем
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, на примере справочника "КонтактныеЛицаПартнеров". Задача: Запрет инициалов. Не допускаеть использование сокращений вида "И. И. ", "И. И. ", "И И" и. . .
Про "Windows must die!"
kumehtar 04.11.2026
Знаете, чет накатило. . . . Когда-то это было почти боевым кличем: мол, нормальный человек сидит на DOS, OS/ 2 или Linux, а вот это вот - Must Die. А теперь человек произносит «мастдай» с усмешкой - и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru