Как сделать - Модальное изображение
Узнать, как создать адаптивные модальные изображения с помощью CSS и JavaScript.
Модальное изображение
Модаль - это диалоговое окно/всплывающее окно, которое отображается в верхней части текущей страницы.
В этом примере используется большая часть кода из предыдущего примера, Модальное окно, только в этом примере мы используем изображения.
×![]()
Шаг 1) Добавить HTML:
Пример
<!-- Триггер модальный -->
<img id="myImg" src="img_snow.jpg" alt="Снег" style="width:100%;max-width:300px">
<!-- Модальный -->
<div id="myModal" class="modal">
<!-- кнопка закрытия -->
<span class="close">×</span>
<!-- Модальное содержание (изображение) -->
<img class="modal-content" id="img01">
<!-- Модальная подпись (текст изображения) -->
<div id="caption"></div>
</div>Шаг 2) Добавить CSS:
Пример
/* Стиль изображения, используемого для запуска модального */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* Модальный (фон) */
.modal {
display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
padding-top: 100px; /* Расположение коробки */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полный высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.9); /* Черный с непрозрачностью */
}
/* Модальное содержание (изображение) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Заголовок модального изображения ( текст изображения) - та же ширина, что и изображение */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Добавить анимацию - величение модели */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* Кнопка закрытия */
.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% Ширина изображения на меньших экранах */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}Шаг 3) Добавить JavaScript:
Пример
// Получить модель
var modal = document.getElementById("myModal");
// Получите изображение и вставьте его внутрь модального - используйте его текст "alt" в качестве подписи
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;
}
// Получить элемент <span>, который закрывает модальный
var span = document.getElementsByClassName("close")[0];
// Когда пользователь нажимает на <span> (x), закройте модальное окно
span.onclick = function() {
modal.style.display = "none";
}Редактор кода »Совет:Кроме того, проверить Модальное окно и Лайтбокс.
