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

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

03.12.2024, 12:04. Показов 4237. Ответов 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
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
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
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
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
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
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
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
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
3857 / 1744 / 432
Регистрация: 14.03.2022
Сообщений: 4,435
10.12.2024, 17:26
Цитата Сообщение от Mailo Посмотреть сообщение
пролубэкендерские темы
Почему вдруг так про "реакт или вью"?
0
10.12.2024, 17:27  [ТС]

Не по теме:

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

0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3857 / 1744 / 432
Регистрация: 14.03.2022
Сообщений: 4,435
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
Ответ Создать тему
Новые блоги и статьи
Алиса нашла кучу ошибок компиляции и запуска в проекте, который без проблем компилировался и запускался)))
anaschu 30.06.2026
Я пока посмеюся, но завтра проверю. А вообще интерсно. Дал алисе файл, в котором точно нет ошибок компиляции и запуска, и попросил их найти. Нашла кучу))) Критические ошибки, мешающие компиляции и. . .
сукцессия 16. Общий обзор, в основном что бы другие ии поняли
anaschu 29.06.2026
# Передаточный документ: модель микоризной сукцессии (для нового чата) Этот документ предназначен для того, чтобы новый чат Claude мог продолжить работу без необходимости заново разбираться в. . .
сукцессия 15 неявная схема
anaschu 29.06.2026
Алиса Калибровка параметров симбиотической модели: технический обзор Содержание: Введение Постановка проблемы Технические аспекты реализации Процесс внедрения изменений
сукцессия 14. Обновленная схема модели
anaschu 28.06.2026
ГЛОБАЛЬНАЯ ОПИСАТЕЛЬНАЯ СПЕЦИФИКАЦИЯ ЭКОСИСТЕМНОЙ МОДЕЛИ «SOIL CHEMISTRY & MYCORRHIZA 2. 0» https:/ / ibb. co/ NnkGpfMd Представленная интегрированная схема описывает непрерывную нелинейную. . .
сукцессия 13. Питон модель трехзонного мицелия, пока что в основном арбускулярного
anaschu 28.06.2026
## Разработка агентной модели микоризной сукцессии: от выявления артефактов к созданию комплексной системы ### Аннотация Представлено исследование по разработке агентной модели микоризной. . .
сукцессия 12. краткий список проверок модели перед запуском.
anaschu 27.06.2026
Скрытые отказы в моделях систем динамики (SD-models) экологических систем: два случая из практики Контекст Разбирался прототип модели систем динамики (SD-модели) микоризной сукцессии: пять. . .
Сукцессия 11. Проверка орудий перед войной: разработка через тестирование
anaschu 27.06.2026
Как не дать модели соврать самой себе: проверки для симуляции микоризной сукцессии Введение Когда вы строите математическую модель живой системы — грибов, растений, почвы — главная опасность. . .
10 сукцессия. Питон код войны грибов и растений
anaschu 27.06.2026
import numpy as np class PlantAgent: def __init__(self, name, strategy, initial_biomass): self. name = name self. strategy = strategy # "greedy" (широколиственные) или. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru