Модальное окно, несколько картинок

Question

Есть, допустим, три картинки. Нужно, чтобы при нажатии на картинку открывалось модальное окно, где будет как бы увеличенная картинка на которую нажали. Проблема в том, что плохо знаю JS и не могу понять, как сделать это. У меня просто открывается модальное окно, а нужно чтобы у каждой картинки открывалось своё окно. При нажатии на красной картинки модальное окно, где увеличена эта красная картинка и тд, у зеленой зеленая и тд. Спасибо заранее.

$(function() {

    // открыть
    $('.view').click(function() {

        $('.popup').fadeIn();
    });

    // закрыть
    $('.close').click(function() {
        $('.close').fadeOut();

    });

});

.popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.close {
    display: flex;
    justify-content: flex-end;

    background-color: black;

    color: white;

    width: 600px;
    height: 400px;
}


.view {
    display: flex;
    margin: 0 15px;
}

.red {
    background-color: red;
    width: 170px;
    height: 170px;
}

.green {
    background-color: green;
    width: 170px;
    height: 170px;
}

.black {
    background-color: black;
    width: 170px;
    height: 170px;
}

.media {
    display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>

    <div class="media">
        <div class="view">
            <img class="red" src="" alt="">
        </div>
        <div class="view">
            <img class="green" src="" alt="">
        </div>
        <div class="view">
            <img class="black" src="" alt="">
        </div>
    </div>

    <div class="popup">
        <div class="close">X</div>
    </div>

</body>

<script src="app.js"></script>
</html>

Answer 1

В модальном окне создаёте img с пустым src. При клике на превью картинки получаете её src и передаёте в img модального окна.

$('.view img').click(function() {
    let src = $(this).attr('src');
    $('.popup img').attr('src',src);
    $('.popup').fadeIn();    
});
$('.close').click(function() {
    $('.popup').fadeOut();
});

.media {
    display: flex;
}
.view {
    width: 33%;
    padding: 10px;
}
.view img,
.popup img {
    max-width: 100%;
}
.popup {
    display: none;
    position: fixed;
    background-color: black;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90vh;
}
.close {
    color: white;
    float: right;
    padding: 10px;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="media">
    <div class="view">
        <img class="red" src="https://avatars.mds.yandex.net/get-pdb/1936330/f0991966-d4da-4a43-a385-6d60998c47ae/s1200" alt="">
    </div>
    <div class="view">
        <img class="green" src="https://avatars.mds.yandex.net/get-pdb/2801191/afea4659-dbff-43e8-8c92-993a424ba5fc/s1200" alt="">
    </div>
    <div class="view">
        <img class="black" src="https://avatars.mds.yandex.net/get-pdb/2491293/b8c3ca02-037e-4297-98f5-c3c2e0f8e209/s1200" alt="">
    </div>
</div>

<div class="popup">
    <div class="close">X</div>
    <img src="" alt="" />
</div>

БЛОГ НА HUSL

Модальное окно, несколько картинок

Ответы (1 шт):