Как сделать скрипт работающим для разных атрибутов id тега img?

@Igor_Pt · Регистрация: 22.12.2011

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

Приветствую! https://www.w3schools.com/howt... images.asp - здесь пример как делать всплывающее окно поверх сайта, ну или как это называется, модальное окно.

Но я не пойму, как сделать этот код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Get the modal
var modal = document.getElementById('myModal');
 
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
 
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
 
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

чтобы это работало с несколькими картинками ( id="myImg1", myImg2, myImg3), т.е. с разными атрибутами id тега img:

HTML5
1
2
3
<img id="myImg1" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg2" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg3" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

Подскажите пожалуйста.

@evikza · 03.04.2017, 20:55

Igor_Pt, я думаю вы хотите сделать вроде этого:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
 
<head>
</head>
 
<body>
  <img class="myImg" src="https://avatars.yandex.net/get-music-content/42108/f2e46f61.a.2888430-1/800x800" alt="2AM" width="200" height="200">
  <img class="myImg" src="https://avatars.yandex.net/get-music-content/32236/9615dbc2.a.2724086-1/800x800" alt="2AM BLACK" width="200" height="200">
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
  </div>
</body>
 
</html>

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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
 
.myImg:hover {
  opacity: 0.7;
}
 
 
/* The Modal (background) */
 
.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.9);
  /* Black w/ opacity */
}
 
 
/* Modal Content (image) */
 
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
 
 
/* Caption of Modal Image */
 
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
 
 
/* Add Animation */
 
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}
 
@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
 
 
/* The Close Button */
 
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
 
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
 
 
/* 100% Image Width on Smaller Screens */
 
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var modal = document.getElementById('myModal');
var imgList = document.querySelectorAll('.myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
 
[].forEach.call(imgList, function(data) {
  data.addEventListener('click', function(event) {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  });
});
 
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

Просто добавляете в код ссылку для изображением с классом .myImg и ссылкой на изображение и будет вам счастье

HTML5
1
<img class="myImg" src="https://avatars.yandex.net/get-music-content/42108/f2e46f61.a.2888430-1/800x800" alt="2AM" width="200" height="200">

Демонстрация

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .