Открытие одного модульного окна с нескольких кнопок

@elektrod220 · Регистрация: 13.01.2015

Студворк — интернет-сервис помощи студентам

Как сделать, что бы открывалось одно и то же окошко по нажатии на разные кнопки?

вот мой JS, который для одной кнопки работает прекрасно. попробовал добавить к другим кнопкам такой же класс - "link", но это не работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
            var call_form_link = document.querySelector('.link');
            var call_form = document.querySelector('.call-form');
            
            call_form_link.addEventListener('click', function(event) {
              event.preventDefault();
              if (call_form.classList.contains('call-form-show')) {
                call_form.classList.remove('call-form-show');
              } else {
                call_form.classList.add('call-form-show');
              }
            }, false);

@Al_lord · 14.01.2015, 03:07

модульное окно? серьезно?

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

вот мой JS, который для одной кнопки работает прекрасно. попробовал добавить к другим кнопкам такой же класс - "link", но это не работает

покажите ...

@elektrod220 · 14.01.2015, 09:03 **[ТС]**

модальное, конечно, спасибо )

ну вот еще html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
   <ul class="flowers-list">
                        <li>
                            <div class="flower-img"></div>
                            <p>15 роз/1500 руб</p>
                            <a href="#" class="price flower-price link">Заказать</a>
                        </li>
                        <li>
                            <div class="flower-img"></div>
                            <p>25 роз</p>
                            <a href="#" class="price flower-price link">Заказать</a>
                        </li>
                        <li>
                            <div class="flower-img"></div>
                            <p>51 роза</p>
                            <a href="#" class="price flower-price link">Заказать</a>
                        </li>
                        <li>
                            <div class="flower-img"></div>
                            <p>101 роза</p>
                            <a href="#" class="price flower-price link">Заказать</a>
                        </li>
    </ul>

получается, что срабатывает только первая кнопка с классом link, остальные пропускает
я с JS не особо знаком, может есть какой-то способ исправить это

@whiteapps · 14.01.2015, 12:56

elektrod220, для множества элементов используйте

JavaScript
1
document.querySelectorAll(".link")

а где у Вас .call-form?

@elektrod220 · 14.01.2015, 15:34 **[ТС]**

спасибо, но не помогло. когда дописал All, перестало вообще работать, даже первая кнопка

а call-form вот

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="call-form">
                        <div class="header">
                            Заказ обратного звонка
                        </div>
                        <form action="send-mail.php" method="post" name="form-1">
                            <input class="input-field" type="text" id="name" name="name" size="20" maxlength="50" placeholder="Введите ваше имя">
                            <input class="input-field" type="text" id="phone" name="phone" size="20" maxlength="50" placeholder="Введите ваш номер"></br>
                            <input class="submit-btn" id="submit" name="send" type="button" value="Перезвоните мне">
                        </form>
</div>

@whiteapps · 14.01.2015, 19:58

не забывайте о том что querySelectorAll возвращает массив

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var call_form_link = document.querySelectorAll('.link');
var call_form = document.querySelector('.call-form');
var len = call_form_link.length;
for(var i=0;i<len;i++){
  call_form_link[i].addEventListener('click', function(event) {
    event.preventDefault();
    if (call_form.classList.contains('call-form-show')) {
      call_form.classList.remove('call-form-show');
    } else {
      call_form.classList.add('call-form-show');
    }
  }, false);
}

http://jsfiddle.net/2jy2378k/

@elektrod220 · 17.01.2015, 12:30 **[ТС]**

спасибо!!

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

@elektrod220 0 / 0 / 0 Регистрация: 13.01.2015 Сообщений: 4
	17.01.2015, 12:30 [ТС]
	спасибо!! 0

Открытие одного модульного окна с нескольких кнопок

Решение