С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/15: Рейтинг темы: голосов - 15, средняя оценка - 4.73
25 / 9 / 8
Регистрация: 13.12.2015
Сообщений: 484

item клик по кнопке в результате открывать модальное окно (item modal window)

16.07.2020, 20:23. Показов 3011. Ответов 13
Метки js (Все метки)

Студворк — интернет-сервис помощи студентам
Подскажите как сделать и-ый клик на кнопку и открывать и-й модальное окно


Проще говоря есть 3 кнопки и 3 окна
Сделать при клике на кнопку 1 открывать модалку 1,
при клике на кнопку 2 открывать модалку 2,
при клике на кнопку 3 открывать модалку 3

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button class="btn_y" id="myBtn">Подробнее</button>
 
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
  <span class="close">&times;</span>
  <p>Some text in the Modal..</p>
</div>
</div>
 
<!-- 2 -->
<button class="btn_y" id="myBtn">Подробнее</button>
 
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
  <span class="close">&times;</span>
  <p>Some text in the Modal..</p>
</div>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var modal = document.querySelector("#myModal");
var btn = document.querySelectorAll("#myBtn");
var span = document.getElementsByClassName("close")[0];
btn.forEach(function(item, i) {
      modal.addEventListener('click', function() {
        modal[i].style.display = "block";
         span.addEventListener('click', function() { 
            modal[item].style.display = "none";
         })
 
      })
    })
CSS
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
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
 
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
 
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
 
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
16.07.2020, 20:23
Ответы с готовыми решениями:

Двойной клик по Item
Здравствуйте. Есть ListBox который по нажатию кнопки заполняется строками. Как сделать чтобы при двойном клике по Items...

ListView - клик по Item.SubItems
На скриншоте видно, нужно сдлать возможность клика и редактирования СУБОБЪЕКТА

Двойной клик по QTreeView / Изменение иконки при раскрытии Item'a
Здравствуйте, у меня есть три вопроса касательно QTreeView. 1) Как отключить редактирование Itema по двойному щелчку в QTreeView?. ...

13
22 / 15 / 8
Регистрация: 20.02.2019
Сообщений: 128
16.07.2020, 20:40
JavaScript
1
2
3
4
5
$(document).ready(function() {
    $('блок по которому кликаем, чтобы открыть меню').click(function(event) {
        $('блок которому добавляем или удаляем класс по клику').toggleClass('active'); // active, это класс которому можно задать свойство display: block.
    });
});
Надеюсь уловили мысль)
Ну и библиотеку jquery подключить не забудьте.
0
25 / 9 / 8
Регистрация: 13.12.2015
Сообщений: 484
16.07.2020, 20:41  [ТС]
можно полностью весь шедевр?0) пліаз
0
164 / 100 / 42
Регистрация: 23.06.2020
Сообщений: 228
16.07.2020, 20:49
Николай16, нельзя использовать одинаковые идентификаторы id.
0
25 / 9 / 8
Регистрация: 13.12.2015
Сообщений: 484
16.07.2020, 20:53  [ТС]
по класу оно разве будет работать?
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
16.07.2020, 20:58
Николай16,


https://codepen.io/Mr_Sergo/pen/LYGgQbM

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button class="myBtn">Подробнее</button>
 
<div class="myModal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..1</p>
    </div>
</div>
 
 
 
<button class="myBtn">Подробнее</button>
 
<div class="myModal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..2</p>
    </div>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var modal = document.querySelectorAll(".myModal");
var btn = document.querySelectorAll(".myBtn");
var span = document.querySelectorAll(".close");
 
btn.forEach(function(e, i) {
    e.addEventListener('click', function() {
        modal[i].style.display = "block";
    })
    span[i].addEventListener('click', function() { 
        modal[i].style.display = "none";
    })
})
CSS
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
.myModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
 
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
 
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
 
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
Добавлено через 2 минуты
Цитата Сообщение от Николай16 Посмотреть сообщение
разве будет работать?
а куда он денется?
0
22 / 15 / 8
Регистрация: 20.02.2019
Сообщений: 128
16.07.2020, 21:02
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button class="btn_y" id="myBtn">Подробнее</button>
 
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
  <span class="close">&times;</span>
  <p>Some text in the Modal..</p>
</div>
</div>
 
<!-- 2 -->
<button class="btn_y" id="myBtn2">Подробнее</button>
 
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
  <span class="close2">&times;</span>
  <p>Some text in the Modal..</p>
</div>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $('#myBtn, .close').click(function(event) {
        $('#myModal').toggleClass('active');
    });
});
$(document).ready(function() {
    $('#myBtn2, .close2').click(function(event) {
        $('#myModal2').toggleClass('active');
    });
});
CSS
1
2
3
.active {
  display: block;
}
Не забываем подключить jquery библиотеку
И ДА! используйте либо разные ID либо классы, можно хоть по тэгам тубо обращаться
0
164 / 100 / 42
Регистрация: 23.06.2020
Сообщений: 228
16.07.2020, 21:05
Лучший ответ Сообщение было отмечено Николай16 как решение

Решение

Николай16,

PHP/HTML
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html >
    <html>
    <head><title>3 Modal Window</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
 
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
 
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
 
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>
 
 
 
<button class="btn_y" onclick="click1(this)" >Подробнее</button>
 
<div  class="modal">
<!-- Modal content -->
<div class="modal-content">
  <span class="close" onclick="click2(this)">&times;</span>
  <p>1.Some text in the Modal..</p>
</div>
</div>
 
<!-- 2 -->
<button class="btn_y" onclick="click1(this)">Подробнее</button>
 
<div  class="modal">
<!-- Modal content -->
<div class="modal-content">
  <span class="close" onclick="click2(this)">&times;</span>
  <p>2. Some text in the Modal..</p>
</div>
</div>
 
<!--3 -->
<button class="btn_y" onclick="click1(this)">Подробнее</button>
 
<div  class="modal" >
<!-- Modal content -->
<div class="modal-content">
  <span class="close" onclick="click2(this)">&times;</span>
  <p>3. Some text in the Modal..</p>
</div>
</div>
 
 
<script>
    function click1(elem){  
        elem.nextElementSibling.style.display="block"; 
        }
        
     function click2(elem){  
        elem.closest('.modal').style.display="none"; 
        }   
          
</script>
</body>
</html>
1
25 / 9 / 8
Регистрация: 13.12.2015
Сообщений: 484
16.07.2020, 21:09  [ТС]
простите где я тупил??))
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
16.07.2020, 21:10
Plastun20, а если модалок будет 100 вы будете каждому прописывать onclick?
0
164 / 100 / 42
Регистрация: 23.06.2020
Сообщений: 228
16.07.2020, 21:19
Цитата Сообщение от Николай16 Посмотреть сообщение
простите где я тупил??))
Начали с id. На одной странице - один уникальный id.
Закрывайте тему

Добавлено через 5 минут
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
Plastun20, а если модалок будет 100 вы будете каждому прописывать onclick?
Да хоть 100500.
JS код от этого не меняется.
copy-past , попробуйте вставить ещё один блок с onclick и без него... Разницу заметили ?
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
16.07.2020, 21:28
Plastun20, а если нужно будет переназначить функции на каких то кнопках а у вас их уже 100500 ? Разницу заметили между js-навешиванием обработчиков и ручным?

Добавлено через 6 минут
расширять код при желании будет удобно?

Хотя кому как удобней...
0
164 / 100 / 42
Регистрация: 23.06.2020
Сообщений: 228
16.07.2020, 21:29
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
Plastun20, а если нужно будет поменять назначение кнопок а у вас их уже 100500 ?
А чего их менять. У них одно назначение - открывать модальное окно.
0
Эксперт JS
2037 / 1096 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
16.07.2020, 22:26
Plastun20, Ок

Добавлено через 15 минут
Николай16, вообщем если вы не хотите прописывать вручную всем элементам обработчики то можете сделать так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button class="btn_y">Подробнее</button> 
<div  class="modal">
<div class="modal-content">
  <span class="close">&times;</span>
  <p>1.Some text in the Modal..</p>
</div>
</div>
 
<button class="btn_y">Подробнее</button> 
<div  class="modal">
<div class="modal-content">
  <span class="close">&times;</span>
  <p>2. Some text in the Modal..</p>
</div>
</div>
JavaScript
1
2
3
4
5
6
7
8
9
10
var close = document.querySelectorAll('.close');
 
document.querySelectorAll('.btn_y').forEach(function(e, i) {
    e.addEventListener('click',function() {
        e.nextElementSibling.style.display="block";
    })
    close[i].addEventListener('click',function() {
        close[i].closest('.modal').style.display="none";
    })
})
в общем то все тоже самое что предложил вам Plastun20 но обработчики навешиваются автоматом независимо от того сколько модалок и "закрывашек".

Добавлено через 32 минуты
Николай16, имейте в виду, если вы вдруг решите поместить какой то элемент между кнопкой открытия и модалкой, например так

HTML5
1
2
3
4
5
6
7
8
9
10
<button class="btn_y" onclick="click1(this)" >Подробнее</button>
 
<div class="some">новый элемент</div>
 
<div  class="modal">
    <div class="modal-content">
        <span class="close" onclick="click2(this)">&times;</span>
        <p>1.Some text in the Modal..</p>
    </div>
</div>
то у вас модалка не будет открываться https://codepen.io/Mr_Sergo/pe... itors=1000 ваш подход в этом плане был лучше.

Добавлено через 3 минуты
а если вы вдруг решите переместить кнопку например под модалку то там вообще чудеса начинаются https://codepen.io/Mr_Sergo/pen/mdVzxxM
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
16.07.2020, 22:26
Помогаю со студенческими работами здесь

Клик по ссылке, модальное окно
Ребят, забываю все... Как так прописать в самой ссылке js код. При клике, модальное окно... Как то так...

Как можно открыть модальное окно без кнопки 'close window'?
Кто знает как можно открыть модальное окно без кнопки 'close window'.

Как модальное окно, нарисованное в XAML, подключить к событию клик?
Добрый день, Не знаю, правильно ли я тему назвал, щас попробую уточнить что интересует... Обычное окно, с одной кнопкой у которой к...

Cannot make a visible window modal
не пойму как исправить вот код: Открываю форму из главной try EditFilter_frm := TEditFilter_frm.Create(self); if...

Cannot Make a visible window Modal
Помогите устранить ошибку Cannot Make a visible window Modal При открытии другой формы.


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

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Новые блоги и статьи
сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
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 законам Кирхгофа и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru