Как открыть полноразмерное изображение в Pop-Up окне на javascript и CSS.
Тема: Способы открытия и закрытия изображений при клике в pop-up окне в полном размере. Стилизация элементов CSS. Решения на javascript и jQueri.
Вопрос к AI gemini-2.5: Нужен код на javascript или Jquery в связке с HTML CSS.
Задача: Поиск в блоке DIV с ID=“content” изображений с калассом “imgup” при клике на которые изображения открываются в pop-up окне, имеющем стилизированную кнопку закрытия этого окна, при клике на которую окно закрывается. Изображение должно располагаться по центру и быть вписанным в размеры окна, но не больше своих физических пиксельных размеров.
Также, окно должно закрываться при клике за областью изображения.
Адаптация кода и под мобильные устройства.
Пояснение работы кода.
Ответ AI gemini-2.5:
Отличное решение! Вот полный, готовый к использованию код на HTML, CSS и чистом JavaScript (Vanilla JS), который выполняет все ваши задачи. JQuery для этого не требуется, что делает код более быстрым и независимым.
Ниже я также приведу пример на JQuery для сравнения.
Готовый пример
Просто скопируйте этот код в один HTML-файл и откройте его в браузере, чтобы увидеть результат.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop-up для изображений</title>
<style>
/* --- Стили для страницы --- */
body {
font-family: sans-serif;
margin: 20px;
}
#content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
max-width: 800px;
margin: 0 auto;
}
#content img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Стиль для изображений, которые будут открываться в pop-up */
#content .imgup {
cursor: pointer;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#content .imgup:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* --- Стили для Pop-up окна --- */
/* 1. Контейнер-оверлей (фон) */
.image-popup {
display: none; /* Изначально скрыт */
position: fixed; /* Позиционирование относительно окна браузера */
z-index: 1000; /* Поверх всех элементов */
left: 0;
top: 0;
width: 100%; /* На всю ширину */
height: 100%; /* На всю высоту */
overflow: auto; /* Прокрутка, если изображение слишком большое */
background-color: rgba(0, 0, 0, 0.85); /* Полупрозрачный черный фон */
/* Используем Flexbox для центрирования изображения */
justify-content: center;
align-items: center;
}
/* 2. Само изображение в Pop-up */
.popup-content {
display: block;
margin: auto; /* Дополнительное центрирование для старых браузеров */
/* Главная логика размера: */
max-width: 90%; /* Не шире 90% от ширины окна */
max-height: 90vh; /* Не выше 90% от высоты окна */
/* Это гарантирует, что изображение впишется в экран,
но НЕ будет увеличено больше своего оригинального размера */
animation: zoomIn 0.3s ease-in-out;
}
/* 3. Кнопка закрытия */
.close-btn {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.close-btn:hover,
.close-btn:focus {
color: #bbb;
text-decoration: none;
}
/* Анимация появления */
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<h1>Галерея изображений</h1>
<p>Кликните на изображение с зеленой рамкой, чтобы открыть его. Изображения с красной рамкой не открываются.</p>
<div id="content">
<!-- Эти изображения будут открываться -->
<img src="https://via.placeholder.com/800x600.png?text=Большое+изображение" alt="Пример" class="imgup" style="border: 3px solid green;">
<img src="https://via.placeholder.com/300x400.png?text=Маленькое+изображение" alt="Пример" class="imgup" style="border: 3px solid green;">
<!-- Это изображение НЕ будет открываться, т.к. у него нет класса "imgup" -->
<img src="https://via.placeholder.com/300x200.png?text=Не+кликабельно" alt="Пример" style="border: 3px solid red;">
<img src="https://via.placeholder.com/1920x1080.png?text=Очень+большое" alt="Пример" class="imgup" style="border: 3px solid green;">
</div>
<!-- HTML структура для Pop-up окна (изначально скрыта) -->
<div id="myPopup" class="image-popup">
<span class="close-btn">×</span>
<img class="popup-content" id="popupImage">
</div>
<script>
// Ждем, пока весь HTML-документ будет загружен
document.addEventListener('DOMContentLoaded', function() {
// 1. Получаем ссылки на все необходимые элементы
const popup = document.getElementById('myPopup'); // Контейнер pop-up
const popupImage = document.getElementById('popupImage'); // Изображение внутри pop-up
const imagesToPopup = document.querySelectorAll('#content .imgup'); // Все изображения с классом "imgup" внутри "#content"
const closeButton = document.querySelector('.close-btn'); // Кнопка закрытия
// 2. Функция для открытия Pop-up
function openPopup(event) {
popup.style.display = "flex"; // Показываем pop-up (используем flex, как в CSS)
popupImage.src = event.target.src; // Устанавливаем src для изображения в pop-up
document.body.style.overflow = 'hidden'; // Запрещаем прокрутку страницы под окном
}
// 3. Функция для закрытия Pop-up
function closePopup() {
popup.style.display = "none"; // Скрываем pop-up
document.body.style.overflow = 'auto'; // Разрешаем прокрутку страницы
}
// 4. Назначаем обработчики событий
// Для каждого изображения из найденных назначаем обработчик клика
imagesToPopup.forEach(image => {
image.addEventListener('click', openPopup);
});
// Назначаем обработчик клика для кнопки закрытия
closeButton.addEventListener('click', closePopup);
// Назначаем обработчик клика на фон (оверлей)
// Окно закроется только если клик был на самом контейнере `.image-popup`,
// а не на его дочерних элементах (т.е. на самом изображении)
popup.addEventListener('click', function(event) {
if (event.target === popup) {
closePopup();
}
});
// Дополнительно: закрытие по кнопке Escape
document.addEventListener('keydown', function(event) {
if (event.key === "Escape" && popup.style.display === "flex") {
closePopup();
}
});
});
</script>
</body>
</html>Пояснение работы кода
HTML
-
: Основной блок, в котором скрипт будет искать изображения.
imgupявляется “триггером” для JavaScript.-
: Это само pop-up окно. Оно скрыто по умолчанию (
display: none). Внутри него находятся:×: Кнопка закрытия (символ “крестик”).
CSS
.image-popup: Стили для фона (оверлея).position: fixedиwidth/height: 100%заставляют его растянуться на весь экран.background-color: rgba(0,0,0,0.85)создает эффект затемнения.display: flex,justify-content: center,align-items: center— это современный и самый надежный способ идеально отцентрировать содержимое (наше изображение) по горизонтали и вертикали.
.popup-content: Стили для самого изображения внутри окна.max-width: 90%иmax-height: 90vh— ключевое правило. Оно говорит браузеру: “Сделай изображение как можно больше, но не шире 90% от ширины экрана и не выше 90% от высоты экрана”. Если оригинальное изображение меньше этих значений, оно отобразится в своем реальном размере. Если больше — оно будет пропорционально уменьшено, чтобы поместиться. Это полностью соответствует вашему требованию.
.close-btn: Стилизует кнопку закрытия, делая ее крупной, белой и позиционируя в правом верхнем углу.
JavaScript (Vanilla JS)
document.addEventListener('DOMContentLoaded', ...): Весь код обернут в этот обработчик. Он гарантирует, что скрипт начнет выполняться только после того, как вся HTML-структура страницы будет загружена.- Получение элементов: Скрипт находит все нужные ему элементы (pop-up окно, картинки-триггеры, кнопку закрытия) и сохраняет их в переменные для удобства.
openPopup(event): Эта функция “открывает” окно. Она меняетdisplayу контейнера pop-up наflex, беретsrc(URL) у изображения, по которому кликнули (event.target.src), и присваивает его нашему пустомуclosePopup(): Функция “закрывает” окно, возвращаяdisplayвnoneи разрешая прокрутку страницы.- Назначение обработчиков:
- Скрипт “пробегается” по всем найденным изображениям с классом
.imgupи на каждое “вешает” слушатель клика, который вызывает функциюopenPopup. - На кнопку закрытия вешается слушатель, вызывающий
closePopup. - На сам фон (
popup) вешается слушатель. Проверкаif (event.target === popup)позволяет закрывать окно только при клике на темный фон, а не на само изображение. - Добавлен бонус: закрытие окна по нажатию клавиши
Escape.
- Скрипт “пробегается” по всем найденным изображениям с классом
Альтернатива на JQuery (для сравнения)
Если бы вы использовали библиотеку JQuery, код JavaScript был бы короче, но делал бы то же самое.
$(document).ready(function(){
// При клике на изображение с классом .imgup внутри #content
$('#content .imgup').on('click', function(){
const imgSrc = $(this).attr('src');
$('#popupImage').attr('src', imgSrc);
$('#myPopup').fadeIn(); // Плавное появление
$('body').css('overflow', 'hidden');
});
// Функция закрытия
function closePopup() {
$('#myPopup').fadeOut(); // Плавное исчезновение
$('body').css('overflow', 'auto');
}
// Закрытие по кнопке
$('.close-btn').on('click', function(){
closePopup();
});
// Закрытие по клику на фон
$('#myPopup').on('click', function(event){
if (event.target === this) {
closePopup();
}
});
// Закрытие по Escape
$(document).on('keydown', function(event){
if (event.key === "Escape") {
closePopup();
}
});
});Как видите, логика та же, но синтаксис более сжатый. Сегодня для таких задач чаще используют чистый JavaScript, чтобы не подключать лишние библиотеки.
Проба готового примера как на javascript, так и на jQuery прошла успешно, но при добавлении на действующий сайт появился консфликт связанный с переопределением стилей отвечающим за центрирование изображения в Поп-Ап окне, изображение прижималось к верхней границе Поп-Ап окна. Попросил ИИ предоставить альтернативные варианты стилизации:
Вопрос к AI gemini-2.5: Нужно расположить изображение по центру поп-ап окна. justify-content: center; align-items: center; - не работают, причина не известна. Есть ли алтернатива?
Ответ AI gemini-2.5:
Давайте разбираться! Проблема, скорее всего, в том, что ваш контейнер .image-popup не является Flexbox контейнером, несмотря на то, что вы задали ему display: flex. Это может происходить в нескольких случаях:
- Переопределение стилей: Где-то в вашем CSS (возможно, в другом файле или в более специфичном селекторе) стили для
.image-popupпереопределяются, иdisplay: flexотменяется. - Неправильная структура HTML: Возможно, структура HTML немного отличается от той, что в моем примере, и браузер не интерпретирует элементы так, как вы ожидаете.
- Устаревший браузер: Очень маловероятно, но возможно, что ваш браузер настолько старый, что не поддерживает Flexbox (хотя Flexbox уже очень хорошо поддерживается всеми современными браузерами).
Альтернативные способы центрирования, если Flexbox не работает:
- Grid Layout (Современный и мощный, аналог Flexbox)
Grid Layout — это еще более современный и мощный способ верстки, чем Flexbox. Он отлично подходит для сложных макетов, но для простой задачи центрирования он тоже подойдет. Абсолютно так же, как и с Flexbox, убедитесь, что для вашего контейнера .image-popup задан display: grid.
.image-popup {
display: grid;
place-items: center; /* Shorthand для align-items: center и justify-items: center */
/* Остальные стили... */
}- Absolute Positioning + Translate (Старый, но проверенный способ) Этот метод работает, даже если ваш контейнер не является Flexbox или Grid контейнером.
.image-popup {
position: fixed;
/* ...остальные стили ... */
}
.popup-content {
position: absolute; /* Важно! */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Ключевая строка! */
/* ...остальные стили ... */
}Здесь мы делаем изображение абсолютно позиционированным (position: absolute), затем сдвигаем его верхний левый угол в центр контейнера (top: 50%; left: 50%). Но этого недостаточно, потому что теперь центр изображения находится в центре контейнера, а не само изображение. Поэтому мы используем transform: translate(-50%, -50%), чтобы сдвинуть изображение на половину его ширины и высоты влево и вверх, тем самым идеально центрируя его.
- Margin: Auto (Работает только если известен размер изображения)
Этот способ самый простой, но он работает только в том случае, если вы знаете точную ширину и высоту изображения, что в вашем случае не подходит, так как изображение может быть разных размеров.
.popup-content {
display: block; /* Важно! Чтобы margin: auto работал */
width: 500px; /* Пример, нужно указать реальную ширину */
height: 300px; /* Пример, нужно указать реальную высоту */
margin: auto;
/* ...остальные стили ... */
}Рекомендации по отладке:
- Проверьте CSS: Откройте инструменты разработчика в вашем браузере (обычно клавиша F12), найдите элемент
.image-popupи посмотрите, какие стили к нему применяются. Убедитесь, чтоdisplay: flexилиdisplay: gridне перечеркнуты (это означает, что они переопределены). - Проверьте структуру HTML: Убедитесь, что у вас нет лишних оберток вокруг изображения или других элементов, которые могут мешать центрированию.
- Используйте
!important(временно): Чтобы убедиться, что проблема именно в переопределении стилей, добавьте!importantк стилям центрирования:
.image-popup {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}Если это сработает, значит, вам нужно найти, где переопределяются стили, и исправить это более правильно. Использование !important считается плохой практикой, так как затрудняет дальнейшее изменение стилей.
- Проверьте браузер: Откройте страницу в другом браузере, чтобы исключить проблемы с конкретным браузером.
Начните с проверки CSS в инструментах разработчика. Если проблема в переопределении стилей, вы увидите это сразу. Если нет, попробуйте Absolute Positioning + Translate.
В итоге проблему решил способ 2 с Absolute Positioning + Translate.
Демонстрация оригинального варианта от AI gemini-2.5.
ТОП 10 случайных публикаций
Последние публикации
