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

@Николай16 · Регистрация: 13.12.2015

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

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

Проще говоря есть 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;
}

@Demolition_Man · 16.07.2020, 20:40

JavaScript
1
2
3
4
5
$(document).ready(function() {
    $('блок по которому кликаем, чтобы открыть меню').click(function(event) {
        $('блок которому добавляем или удаляем класс по клику').toggleClass('active'); // active, это класс которому можно задать свойство display: block.
    });
});

Надеюсь уловили мысль)
Ну и библиотеку jquery подключить не забудьте.

@Николай16 · 16.07.2020, 20:41 **[ТС]**

можно полностью весь шедевр?0) пліаз

@Plastun20 · 16.07.2020, 20:49

Николай16, нельзя использовать одинаковые идентификаторы id.

@Николай16 · 16.07.2020, 20:53 **[ТС]**

по класу оно разве будет работать?

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

разве будет работать?

а куда он денется?

@Demolition_Man · 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 либо классы, можно хоть по тэгам тубо обращаться

@Plastun20 · 16.07.2020, 21:05

Николай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>

@Николай16 · 16.07.2020, 21:09 **[ТС]**

простите где я тупил??))

@Mr_Sergo · 16.07.2020, 21:10

Plastun20, а если модалок будет 100 вы будете каждому прописывать onclick?

@Plastun20 · 16.07.2020, 21:19

Сообщение от Николай16

простите где я тупил??))

Начали с id. На одной странице - один уникальный id.
Закрывайте тему

Добавлено через 5 минут

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

Plastun20, а если модалок будет 100 вы будете каждому прописывать onclick?

Да хоть 100500.
JS код от этого не меняется.
copy-past , попробуйте вставить ещё один блок с onclick и без него... Разницу заметили ?

@Mr_Sergo · 16.07.2020, 21:28

Plastun20, а если нужно будет переназначить функции на каких то кнопках а у вас их уже 100500 ? Разницу заметили между js-навешиванием обработчиков и ручным?

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

Хотя кому как удобней...

@Plastun20 · 16.07.2020, 21:29

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

Plastun20, а если нужно будет поменять назначение кнопок а у вас их уже 100500 ?

А чего их менять. У них одно назначение - открывать модальное окно.

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

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. 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 законам Кирхгофа и. . .

@Николай16 25 / 9 / 8 Регистрация: 13.12.2015 Сообщений: 484
	16.07.2020, 20:41 [ТС]
	можно полностью весь шедевр?0) пліаз 0

@Plastun20 164 / 100 / 42 Регистрация: 23.06.2020 Сообщений: 228
	16.07.2020, 20:49
	Николай16, нельзя использовать одинаковые идентификаторы id. 0

@Николай16 25 / 9 / 8 Регистрация: 13.12.2015 Сообщений: 484
	16.07.2020, 20:53 [ТС]
	по класу оно разве будет работать? 0

@Николай16 25 / 9 / 8 Регистрация: 13.12.2015 Сообщений: 484
	16.07.2020, 21:09 [ТС]
	простите где я тупил??)) 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	16.07.2020, 21:10
	Plastun20, а если модалок будет 100 вы будете каждому прописывать onclick? 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	16.07.2020, 21:28
	Plastun20, а если нужно будет переназначить функции на каких то кнопках а у вас их уже 100500 ? Разницу заметили между js-навешиванием обработчиков и ручным? Добавлено через 6 минут расширять код при желании будет удобно? Хотя кому как удобней... 0

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

Решение