Эффект увеличивающегося изображения при клике на CSS И JavaScript

Эффект увеличивающегося изображения при клике на CSS И JavaScript

Эффект увеличивающегося изображения при клике на CSS И JavaScript

Доброго времени суток! В примере ниже мы рассмотрим с Вами скрипт, который при клике по изображению
отображает его в увеличенном виде в модальном окне на странице. При клике в любой части страницы, кроме
самого изображения, изображение уменьшается.

Код:







<!DOCTYPE html>

<html>



<head>

    <meta charset="UTF-8">

    <title>Пример модального окна с изображением</title>

    <style>



        /* Стили для модального окна */

        .modal {

            display: none;

            /* По умолчанию скрыто */

            position: fixed;

            /* Фиксированное положение */

            z-index: 1;

            /* Верхний уровень */

            left: 0;

            top: 0;

            width: 100%;

            /* Полная ширина */

            height: 100%;

            /* Полная высота */

            overflow: auto;

            /* Включить прокрутку, если необходимо */

            background-color: rgba(0, 0, 0, 0.9);

            /* Черный цвет с прозрачностью */

        }



        .modal-content {

            margin: auto;

            display: block;

            width: 30%;

            max-width: 700px;

        }



        .modal-content img {

            width: 100%;

            height: auto;

        }



        /* Стили для изображения */

        img {

            border-radius: 5px;

            cursor: pointer;

            transition: 0.3s;

            width: 100%;

        }



        img:hover {

            opacity: 0.7;

        }



        .images {

            width: 450px;

            display: flex;

        }



    </style>

</head>



<body>

    <h2>Пример модального окна с изображением</h2>



    <!-- Изображения нужно добавлять в этот блок -->

    <div class="images">

        <img src="https://myrusakov.ru/images/ue5-cover.png" alt="Image" onclick="displayModal(this);">

        <img src="https://myrusakov.ru/images/cppue5-cover.png" alt="Image" onclick="displayModal(this);">

        <img src="https://srs.myrusakov.ru/images/laravel-cover.png" alt="Image" onclick="displayModal(this);">

    </div>



    <!-- Модальное окно -->

    <div id="modal" class="modal" onclick="hideModal();">

      <span class="close">&times;</span>

      <div class="modal-content">

        <img id="modal-image">

      </div>

    </div>



    <script>

        // Получаем элементы модального окна и изображения

        const modal = document.getElementById("modal");

        const modalImage = document.getElementById("modal-image");



        // Отображаем модальное окно и устанавливаем источник изображения

        function displayModal(img) 

        {

            modal.style.display = "block";

            modalImage.src = img.src;

        }



        // Скрываем содержимое модального окна, если пользователь кликнул вне его

        function hideModal() 

        {   

            if (event.target == modal) {

                modal.style.display = "none";

            }

        }

    </script>

</body>



</html>



Таким образом, с помощью вот такого простого кода на CSS и JavaScript можно создать
нечто вроде галереи изображении.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий