Переделать скрипт с JQuerry на чистый ОІ

Question

есть скрипт который делает изображение на весь экран и затемняет фон.

    $(document).ready(function() {

    $(".merch-img").on('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(400);
      $(".popup_bg").click(function(){
        $(".popup").fadeOut(400);
        setTimeout(function() {
          $(".popup").remove();
        }, 800);
      });
    });

    });

Как можно сделать его на чистом javascript'e?

    function showFullScreen() {
      var merch = document.getElementsByClassName('merch-img');
      var src = merch.getAttribute('src');
      var popup = document.getElementsByClassName('popup');
      var popup_bg = document.getElementsByClassName('popup_bg')
      document.body.append("<div class='popup'>"+
               "<div class='popup_bg'></div>"+
               "<img src='"+src+"' class='popup_img' />"+
               "</div>");
       fadeIn(popup);
    }

    function fadeIn(el) {
            var opacity = 0.01;
            document.querySelector(el).style.display = "block";
            var timer = setInterval(function() {
                if(opacity >= 1) {
                    clearInterval(timer);
                }
                document.querySelector(el).style.opacity = opacity;
                opacity += opacity * 0.1;
            }, 10);
    }

    function fadeOut(el) {
            var opacity = 1;
            var timer = setInterval(function() {
                if(opacity <= 0.1) {
                    clearInterval(timer);
                    document.querySelector(el).style.display = "none";
                }
                document.querySelector(el).style.opacity = opacity;
                opacity -= opacity * 0.1;
            }, 10);
    }

Answer 1

На своей странице попробуй клацнуть Инструменты, затем Исходный код, и уже сюда добавить, следующий код:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

либо туда, куда ты суешь js, вставь содержимое библиотеки

btw, немного рефактор нажал:

$('.merch-img').click(({currentTarget})=>{
    const src = $(currentTarget).attr('src');
    $('body').append(`<div class="popup" style="display:none">
        <div class="popup_bg">
        <img src="${src}" class="popup_img">
    </div></div>`);
    $('.popup').fadeIn(400);
    $('.popup_bg').click(()=>{
        $('.popup').fadeOut(400, ()=>$('.popup').remove());
    });
});

.popup_bg{
    background: #13131375;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
}

.popup{
    width: 100%;
    height: 100%;
}

.popup_img{
    z-index: 2;
    position: absolute;
    left: 10px;
    top: 10px;
}

.merch-img{
    width: 50%;
    height: 50%;
}

body{
    background: #eaeaea;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://www.google.ru/logos/doodles/2020/thank-you-custodial-and-sanitation-workers-6753651837108756-law.gif" class="merch-img">

БЛОГ НА HUSL

Переделать скрипт с JQuerry на чистый ОІ

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