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

@Mailo · Регистрация: 18.02.2010

Заюзал вот этот скрипт для модалок

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 -->

@gogolik · 10.12.2024, 18:03

Сообщение от Mailo

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

Почитайте на досуге о различиях var и let. Ну так, чтобы в курсе быть.

Сообщение от Mailo

Как правило заказчик предварительно уведомляет, что jq он не примет.

И правильно, нечего помои на сайты тянуть.

@voraa · 10.12.2024, 18:05

Сообщение от Mailo

Пока такой довольно неплохой варик

Я только не пойму, почему window.onload, а не DOMContentLoaded?

@Mailo · 10.12.2024, 19:21 **[ТС]**

Сообщение от voraa

Я только не пойму, почему window.onload, а не DOMContentLoaded?

Да сам не знаю от куда он взялся

поменял, нефиг загрузки картинок дожидаться.

@Segera · 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>

Кстати, из учебного курса по фронтенду. Они в своих академиях не в теме?

@voraa · 11.12.2024, 10:06

Сообщение от Segera

если убрать не кошерность и ай-яй - гуру сообщество на своем съезде мудро покачали головой про незя.

Еще бы понять, какие гуру, когда был съезд и что незя?

Сообщение от Segera

Понятно, варианты могут быть не для одной модалки.

А при чем тут модалка?
Семантический смысл <a href=> перейти куда то , а не открыть что то.

@Mailo · 11.12.2024, 13:40 **[ТС]**

Сообщение от Segera

<a href="mailto:nowhere@mail.ru">Отправить сообщение в никуда</a>
<a href="#section1">Переход к разделу 1</a>

Дык это повсеместно и це кошерно, переключение на мэйлагента и якоря, сюдаж телефон tel добавить можно и ватсап с телегой. Не уверен, но по другому эти штуки не сделаешь, посему они в виде таких "исключений" для тега <a>.

@gogolik · 11.12.2024, 15:24

Segera, вы лишь продолжаете показывать своё невежество и тотальное непонимание темы, о которой идёт речь. Перестаньте позориться.

Новые блоги и статьи Все статьи Все блоги /
Дефенестрация kumehtar 18.06.2026 Узнал интересное слово. Дефенестрация. Это когда ты выбрасываешь кого-либо или что-либо из окна. Возьму на вооружение)))	Дихотомия добра и зла kumehtar 18.06.2026 Как Дзен-буддисты говорят о добре и зле: не нужно воевать против зла, нужно воевать против невежества. Тогда добро станет ествественным, и поэтому вечным. Но дело в том, что невежество всё время. . .	Своя Интернет-Компания iceja 18.06.2026 Я программист с экономическим образованием, пишу свой проект, это SaaS для бизнесов. Мне нужен co-founder с высшим экономическим образованием, и/ или инвестор. Сейчас проект в интенсивной разработке,. . .	24 Мат модель здравосохранения: функциональные требования к строительству пищеблока anaschu 18.06.2026 СРесурсами1: финансовый SD-контур, калькулятор функциональных требований пищеблока Сегодня разделили затраты в агенте Экономика по образцу модели НАСОСЫ, добавили расчёт ROI и построили первый. . .
23. что сделано за последнее время. anaschu 17.06.2026 • Эталон: Клиника НИИ питания РАМН, Москва — централизованный пищеблок, 225 коек, 180 пациентов • Git: репозиторий med2, ветка абсентеизм. Рабочий файл: СРесурсами1_v4. alp • Смежный проект:. . .	22. Подключение слоя системной динамики (потоковые диффуры): экономические метрики модели anaschu 17.06.2026 Апдейт модели: финансовый контур, разделение затрат Продолжаю развивать модель рабочего коллектива на AnyLogic. В этот раз работа шла над агентом Экономика — финансовым SD-слоем модели. Задача:. . .	[golang] Insert Delete GetRandom O(1) (Leetcode: 380) alhaos 16.06.2026 Insert Delete GetRandom O(1) Сложность: Medium Источник: LeetCode 380 Задача Реализовать структуру данных RandomizedSet, которая поддерживает следующие операции за O(1) в среднем:	Свет в конце тоннеля kumehtar 16.06.2026 Поймал себя на одной мысли. Раньше мне всегда казалось неправильным жить без чёткого понимания, куда всё идёт. Будто я иду по дороге судьбы, но не знаю, куда она ведёт. А раз не знаю — значит,. . .

@gogolik Супер-модератор 3961 / 2122 / 833 Регистрация: 13.03.2010 Сообщений: 6,968
	11.12.2024, 15:24
	Segera, вы лишь продолжаете показывать своё невежество и тотальное непонимание темы, о которой идёт речь. Перестаньте позориться. 0