В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.
Порой появляется необходимость сделать увеличение изображения при нажатии на него во всплывающем окне. В итоге получаем увеличенную картинку с затемненным фоном.
Сделать такое очень просто, используя jQuery библиотеку. Нам понадобятся три файла - index.html, файл стилей в папке css с названием template.css, и файл скриптов popup_img.js. А ещё три изображения в папке images
Для начала напишем HTML-разметку страницы, не забываем подключить файл стилей и библиотеку jQuery:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Страница</title>
<link rel="stylesheet" href="/../12/css/template.css" type="text/css" />
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript" src="/js/popup_img.js"></script>
</head>
<body>
<img src="/images/image1.jpg" class="image" alt="Пейзаж" />
<img src="/images/image2.jpg" class="image" alt="Пейзаж" />
<img src="/images/image3.jpg" class="image" alt="Пейзаж" />
</body>
</html>
Так же добавляем наши изображения на страницу. У каждого изображения добавляем класс image, при помощи которого мы в будущем будем обращаться в скрипте к изображениям.
Следующий шаг - написать скрипт, который будет добавлять затемненный фон и увеличенное изображение.
$(document).ready(function() { // Ждём загрузки страницы
$(".image").click(function(){ // Событие клика на маленькое изображение
var img = $(this); // Получаем изображение, на которое кликнули
var src = img.attr('src'); // Достаем из этого изображения путь до картинки
$("body").append("<div class='popup'>"+ //Добавляем в тело документа разметку всплывающего окна
"<div class='popup_bg'></div>"+ // Блок, который будет служить фоном затемненным
"<img src='"+src+"' class='popup_img' />"+ // Само увеличенное фото
"</div>");
$(".popup").fadeIn(800); // Медленно выводим изображение
$(".popup_bg").click(function(){ // Событие клика на затемненный фон
$(".popup").fadeOut(800); // Медленно убираем всплывающее окно
setTimeout(function() { // Выставляем таймер
$(".popup").remove(); // Удаляем разметку всплывающего окна
}, 800);
});
});
});Здесь всё описывают комментарии. Следующий шаг - добавить стили, для них я не буду описывать комментарии, подразумевается, что CSS вы знаете хорошо.
body {
margin:0;
}
.image {
margin:30px;
float:left;
cursor:pointer;
max-height:100px;
}
.popup {
position: absolute;
height:100%;
width:100%;
top:0;
left:0;
display:none;
text-align:center;
}
.popup_bg {
background:rgba(0,0,0,0.4);
position:absolute;
z-index:1;
height:100%;
width:100%;
}
.popup_img {
position: relative;
margin:0 auto;
z-index:2;
max-height:94%;
max-width:94%;
margin:1% 0 0 0;
}Результат работы смотрите на демо-странице:
Исходники примера можете скачать по ссылке ниже:
Комментарии
Это как-то можно исправить?
Нужно position: relative; поменять на fixed у popup_bg и popup_img и выравнять изображение через margin в popup_img
Только высота изображений изначальная (перед кликом) уменьшилась в раза 3... Буду благодарен за помощь.
Лечение: в файле .css в свойствах класса .popup нужно заменить position:absolute; на position: fixed;
не работает в демке? Какой браузер? Если не работает в вашем коде - что-то сделали не так
1. А крестик закрытия подскажите как приделать?
2. Как сделать закрытие при клике по самой картинке? Сейчас закрывается только при клике по фону.
.popup_img {
pointer-events: none;
}
$(".popup").fadeOut(800); // Медленно убираем всплывающее окно
setTimeout(function () { // Выставляем таймер
$(".popup").remove(); // Удаляем разметку всплывающего окна
}, 800);
});
$(document).ready(function() {
$(".image").click(function(){ // Событие клика на маленькое изображение
var img = $(this); // Получаем изображение, на которое кликнули
var src = img.attr('src'); // Достаем из этого изображения путь до картинки
$("body").append(""+ //Добавляем в тело документа разметку всплывающего окна
""+ // Блок, который будет служить фоном затемненным
""+ // Само увеличенное фото
"");
$(".popup").fadeIn(500);
$(".popup_bg").click(function(){
$(".popup").fadeOut(500);
setTimeout(function() {
$(".popup").remove();
}, 500);
});
$(".popup").click(function(){
$(".popup").fadeOut(500);
setTimeout(function() {
$(".popup").remove();
}, 500);
});
});
});
RSS лента комментариев этой записи