Несколько модалок на 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 -->

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

До понятия якорь, где ограничение больше некуда.

Какие ограничения?

@barabar · 10.12.2024, 10:28

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

@voraa · 10.12.2024, 11:08

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

или перенаправления.

А что плохого в перенаправлениях? Бывают случаи, когда они нужны и полезны.

@barabar · 10.12.2024, 11:14

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

А что плохого в перенаправлениях? Бывают случаи, когда они нужны и полезны.

Я так и сказал. Нужны или перенаправления или 404. Только ни в коем случае не 500. Это повлияет на индексацию.

@Mailo · 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{
    
}

@barabar · 10.12.2024, 13:40

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

не знаю правда что она обозначает

Это значит, что программист накосячил на бэкенде

@voraa · 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 подправить

@pincet · 10.12.2024, 14:58

Не по теме:

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

@Mailo · 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);

@barabar · 10.12.2024, 15:55

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

набирают обороты запросы на вёрстку с ванильным js, с чем это связанно - я без понятия

Возможно, с тем, что нет смысла грузить дополнительную библиотеку и замедлять загрузку страницы. Время jQuery уже прошло. Аминь

@Mailo · 10.12.2024, 16:31 **[ТС]**

Да всяких мелких лендингов, которых у меня большинство по ходу это дело с нагрузкой на сервер вообще не заботит. А я то всё ждал, когда к нам прямо из соединительных штатов приедет http2, что бы спрайты перестать делать, а приехал svg и я перестал.

@voraa · 10.12.2024, 16:43

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

что нет смысла грузить дополнительную библиотеку и замедлять загрузку страницы.

Типа реакт или вью меньше ?

@barabar · 10.12.2024, 16:50

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

приедет http2

Уже давно пришел. Только проснулся?

Прописать в nginx одну строчку и готово.

@barabar · 10.12.2024, 17:03

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

Типа реакт или вью меньше ?

Я не пользовался. Но насколько я знаю, это уже совсем другой уровень абстракции. А jQuery помогала стабильной работе с разными браузерами. Сейчас же такая проблема отпала. Значит и jQuery уже не нужна. У меня кстати на одном сайте до сих пор стоит... лень переписывать код. Я подгружаю, используя атрибут defer.

@Mailo · 10.12.2024, 17:10 **[ТС]**

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

Уже давно пришел.

А что мне никто не сказал

Ну это объясняет, почему спрайты никто не просит, наверное.

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

реакт или вью

Вот эти бы сразу оба два куданить свалили бы с фронтедовских рынков, пролубэкендерские темы, яб готов на ваниле начать всё делать ну и ещё Tailwind со всякими Тильдами с собой прихватили.

@barabar · 10.12.2024, 17:17

А меня больше всего напрягло то, что гугл рекомендовал все картинки заменять на формат *.webp У меня на сайте 300.000 картинок JPG. Я переформатировал их все в WebP, но и старые тоже не удалил, что бы не было косяков с ошибками индексации. Теперь у меня на сайте уже 600 тысяч картинок, но профита от этого никакого не получил. Даже хуже стало. Больше Гуглу доверия нет

krvsa · 10.12.2024, 17:26

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

пролубэкендерские темы

Почему вдруг так про "реакт или вью"?

@Mailo · 10.12.2024, 17:27 **[ТС]**

Не по теме:

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

krvsa · 10.12.2024, 17:28

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

Больше Гуглу доверия нет

А ты им письмо гневное напиши...

@Mailo · 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 долго храняться эти скрипты, надеюсь дольше чем на моём компе снова начнётся балет Щелкунчик.

Новые блоги и статьи Все статьи Все блоги /
Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .	У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35". kumehtar 04.08.2026 С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .	Как ИИ начал спорить и врать (возможно почуяв опасность для себя от индустрии - уход от электроники). Hrethgir 04.08.2026 Недельный диалог, на фоне событий с НПЗ. Да, из спирта можно получать бензин, и это не сложно. Но потом в схеме я решил избавиться от насоса, при этом полностью сделав контроль подачи спирта в. . .	Термопринтер QR701 Argus19 03.08.2026 Термопринтер QR701 Купил два термопринтера QR701. На сэлф-тесте написано: Language: PC936 (GB18030). Что означает, что принтеры могут печатать только латиницу и китайские иероглифы. Так же. . .
Создание формы заимствованного документа Maks 03.08.2026 Задача: Необходимо создать собственную форму заимствованного документа. На форме должен быть реквизит "Покупатель", а также табличная часть со следующими реквизитами: - Расчетный счет покупателя. . .	Задача предоставления скидок покупателям Maks 03.08.2026 Задача: В документе "Продажи" необходимо реализовать функционал предоставления скидок покупателям. Скидка должна автоматически рассчитываться и подставляться в соответствующее поле при выборе. . .	Почему SEO не начинается с ключевых слов: что проверить до написания текстов Neotwalker 01.08.2026 Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .	Знание — сила: Доктрина интенциональности знаний, углубление в формулу Hrethgir 01.08.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .

@barabar Заблокирован
	10.12.2024, 10:28
	Я вам всем спорящим могу показать, что такое на самом деле плохой подход. Это когда какой-нибудь урл на сайте не обрабатывается и выдает 500-ые ошибки вместо 404 или перенаправления. Вот это на самом деле плохой подход. Показываю пример. Остальное несущественные мелочи. 0

@pincet
	10.12.2024, 14:58
	Не по теме: за jQuery на проектах не панишат? просто вопрос, никаких холиваров (ну и за var) 0

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	10.12.2024, 16:31 [ТС]
	Да всяких мелких лендингов, которых у меня большинство по ходу это дело с нагрузкой на сервер вообще не заботит. А я то всё ждал, когда к нам прямо из соединительных штатов приедет http2, что бы спрайты перестать делать, а приехал svg и я перестал. 0

@barabar Заблокирован
	10.12.2024, 17:17
	А меня больше всего напрягло то, что гугл рекомендовал все картинки заменять на формат *.webp У меня на сайте 300.000 картинок JPG. Я переформатировал их все в WebP, но и старые тоже не удалил, что бы не было косяков с ошибками индексации. Теперь у меня на сайте уже 600 тысяч картинок, но профита от этого никакого не получил. Даже хуже стало. Больше Гуглу доверия нет 0

@Mailo
	10.12.2024, 17:27 [ТС]
	Не по теме: Да я перестал доверять ему ещё на моменте, когда он придумал эти качели со шрифтами, swap там и.д. Мне вся клиентура разом, мол удаляй это мелькание шрифтов на загрузке, а чо сами просили оптимизировать и гуглспидировать 0