Добавить предыдущую / следующую кнопку, а также несколько изображений на одном модальном окне
У меня здесь есть модальное окно с изображением. Однако теперь я хочу добавить еще одно изображение внутри модального окна и иметь кнопку «предыдущий / следующий» для переключения между двумя изображениями. Я попытался добавить туда src, но мне не удалось добавить предыдущую / следующую функцию. Как мне это сделать? Спасибо!
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}/* 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.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
/* 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;
}`<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id = "myBtn">Open Modal</button>
<!-- The Modal -->
<div id = "myModal" class = "modal">
<!-- Modal content -->
<div class = "modal-content" style = "width:740px">
<span class = "close">×</span>
<div align = "center"><img src = "https://en.wikipedia.org/wiki/Elephant#/media/File:African_Bush_Elephant.jpg" width = "700" height = "560"></div>
<div align = "center"><img src = "https://en.wikipedia.org/wiki/Elephant#/media/File:Aardvark2_(PSF)_colourised.png" width = "700" height = "560"></div>
</div>
</div>
</body>
</html>Демо можно найти по адресу: [1] https://jsfiddle.net/tinywhui/a5uLgsrp/
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
54
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Добавьте их внутри модального окна как позиционированные элементы absolute.
<!-- Modal content -->
<div class = "modal-content" style = "width:740px">
<span class = "close">×</span>
<img src = "left-arrow.svg" />
<img src = "right-arrow.svg" />
<div align = "center"><img src = "https://en.wikipedia.org/wiki/Elephant#/media/File:African_Bush_Elephant.jpg" width = "700" height = "560"></div>
<div align = "center"><img src = "https://en.wikipedia.org/wiki/Elephant#/media/File:Aardvark2_(PSF)_colourised.png" width = "700" height = "560"></div>
</div>
Затем в своем javascript настройте таргетинг на эти элементы и добавьте функции onclick, которые скрывают или отображают изображения в модальном окне.
Другие вопросы по теме
Mailto не открывает вкладку создания Gmail
Как удалить кавычки после парсинга веб-страниц с помощью vba
Гиперссылки перекрываются с div
Пожалуйста, заполните всплывающую подсказку для этого поля против сообщения "Это поле обязательно" в HTML-формах
Создать новую HTML-таблицу для каждой строки из MySql / PHP
Как изменить example.com/blog.html на example.com/blog
Какое значение имеет выбор, когда выбран отключенный параметр?
Прозрачное пространство между div и границей с радиусом границы
Шаблон модуля JavaScript - событие прокрутки не работает
Таблицы Google запрашивают ввод даты на основе выбора проверки данных
Похожие вопросы
Как получить графические точки после рисования с помощью arcgis api
Проблемы с синхронизацией / асинхронным промежуточным программным обеспечением Expressjs - как исправить?
Как создать многострочный файл загрузки Javascript
Излишняя задержка с жестко запрограммированным временем разрешения
Что такое регулярное выражение для буквенно-цифровой строки длины x или длины y?
Ng-repeat не отображается после анализа JSON
Получение атрибута цвета css с помощью транспортира
Почему запрос api возвращает пустой массив?
Буфер обмена очищается при выходе
Функция setState не определена