Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 19.02.2015
Сообщений: 12

Открытие произвольного количества модальных окон с уникальным id для каждого.

19.02.2015, 21:03. Показов 948. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем доброго дня!
Нужна помощь. Если кто может, то пожалуйста.
Есть скрипт модального окна. Он открывает одно окно по классу. Как его переделать, чтобы он открывал любое кол-во окон по ссылке <a href id..., присвоив персональный id каждому окну? А также использовать одну подложку для всех окон. Если кто может, помогите пожалуйста.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
function Modal(modalEl, overlayEl) {
                  this.modal = $(modalEl);
                  this.overlay = $(overlayEl);
                  this.wWidth = $(window).width();
                  this.wHeight = $(window).height();
                  this.dHeight = $(document).height();
            }
            Modal.prototype = {
                  init: function(){
                    this.bindHandlers();
                  },
                  bindHandlers: function(){
                    var self = this;
                    $('.modal-link').on('click', function(){
                          self.showModal();
                    });
                    $(window)
                          .resize(function() {
                            self.setWinSize($(this));
                            self.setModalPosition();
                         })
                           .scroll(function() {
                            self.setWinSize($(this));
                            self.setModalPosition();
                         });
                    $('.close-button').click(function(){
                          self.hideModal();
                    });
                  },
                  showModal: function(){
                    this.overlay.fadeIn();
                    this.modal.fadeIn();
                    this.setModalPosition();
                  },
                  hideModal: function(){
                    this.overlay.fadeOut();
                    this.modal.fadeOut();
                  },
                  setModalPosition: function(){
                    var modalHeight = this.modal.outerHeight(),
                            modalWidth = this.modal.outerWidth(),
                            scrollTop = $(window).scrollTop();
                    if(this.wHeight < modalHeight){
                          this.modal.css('top', scrollTop);
                    } else {
                          this.modal.css('top', this.centerVertically(this.wHeight,modalHeight,scrollTop));
                    }
                    if(this.wWidth < modalWidth){
                          this.modal.css('left', 0);
                    } else {
                          this.modal.css('left', this.centerHorizontally(this.wWidth,modalWidth));
                    }
                  },
                  centerVertically: function(w, m, scroll){
                    return ((w - m)/2 + scroll);
                  },
                  centerHorizontally: function(w, m){
                    return (w - m)/2;
                  },
                  setWinSize:function(win){
                    this.wWidth = win.width();
                    this.wHeight = win.height();
                  }
            }
 
          $(document).ready(function(){
            var modal = new Modal($('.modal-window'), $('.modal-overlay'));
            modal.init();
          });

HTML5
1
2
3
4
5
6
7
<p class="modal-link">Открыть окно</p>
<div class="modal-overlay">
  <div class="modal-window">
    <p>содержимое</p>
    <button class="close">Close</button>
  </div>
</div>
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
19.02.2015, 21:03
Ответы с готовыми решениями:

Открытие модальных окон по своему id
Приветствую. Есть набор кнопок. Считаю элементы и по которому (порядковый номер) было нажатие открыть соответствующее окно. ...

Как использовать jQuery для открытия модальных окон в pdf файлом?
В html много ссылок типа: &lt;a href=&quot;pdf.pdf&quot; onclick=&quot;window.open(this.href, '', 'scrollbars=1,height='+Math.min(400,...

Несколько модальных окон
Соответственно, есть вот такой скрипт - https://codepen.io/dzivenu/pen/BwmBqq &lt;h1&gt;Simple Responsive Modal&lt;/h1&gt; ...

1
9 / 5 / 1
Регистрация: 09.11.2012
Сообщений: 31
20.02.2015, 11:48
Модальное окно оттого и названо модальным, что открывается только одно и не позволяет ничего делать, пока его не закроешь.
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
20.02.2015, 11:48
Помогаю со студенческими работами здесь

Много модальных окон
Добрый вечер. На странице есть очень много модальных окон. Модалки реализованы посредством ArcticModal. Так вот, в чём суть. Есть много...

Сворачивание модальных окон
Здравствуйте! Подтолкните на мысль как сделать сворачивание модального окна под тип сворачивания окон в Mac OS (как засасывание в воронку) ...

Закрытие модальных окон
Есть модальное окно: &lt;div class= &quot;modal&quot;&gt; &lt;div class = &quot;modal_content&quot;&gt;&lt;/div&gt; &lt;/div&gt; Пытаюсь сделать так, чтобы оно...

Наложение модальных окон
Здравствуйте! Пытаюсь создать html-страницу, включающую 2 части-колонки, из которых вызываются модальные окна. Далее...

Кеширование модальных окон (PHP)
Ув. ALL Столкнулся с проблемой полного и постоянного кеширования модального окна. (См. файл) Причем никакие: ...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru