JSFiddle - React, Tailwind, and code Playground

by moron

HTML

<div id="wrapper">
<img src="image.png" alt="Картинка">
</div>

CSS

img {
 height: 100px;width: 100px;   
}
.wrapperImg {
 height: 500px;
 width: 100%;
 background: black;
 position: absolute;
 left: 0;
 top: 0;
}
.fullImg {
 height: 200px;
 width: 200px;
 margin: 0 auto;
}
.cross {
 height: 10px;
 width: 10px;
 position: absolute;
 right: 5;
 top: 5;
 background: red;    
}

JavaScript

//var litleImg = document.getElementsByTagName('img')[0];
//litleImg.onclick = function() {
// var adressImg = litleImg.getAttribute('src');
// var wrapperImg = document.createElement('div');
// wrapperImg.className = 'wrapperImg';
// var wrapper = document.body.appendChild(wrapperImg);
// var cross = document.createElement('IMG');
// cross.className = 'cross';
// cross.setAttribute('src', '/image/cross.bmp');
// var timing = cross.getAttribute('src');
// alert(timing)
// wrapper.appendChild(cross);
// var fullImg = document.createElement('IMG');
// fullImg.className = 'fullImg';
// wrapper.appendChild(fullImg);
//    cross.onclick = function() {
//     document.body.removeChild(wrapper);
//    }
//}


function zoomImage () {
  var arrayImg = document.getElementsByTagName('img');
  for(var i = 0; i < arrayImg.length; i++){ 
    arrayImg[i].onclick = function(x){
//      alert(arrayImg[0]);
      return function(){//осуществляем замыкание
//       var that = arrayImg[x];
       var srcImg = this.getAttribute('src');
       //Создаем блок-обертку, в котором будет прозрачный черный фон
       //и блок-обертка для изображения. Такая хрень нужна, чтобы
       //не создавать наследования прозрачности в изображении.
       var mainWrapper = document.createElement('div');
       mainWrapper.className = 'mainWrapper';
       document.body.appendChild(mainWrapper);
       //Создаем блок прозрачный черный фон
       var opacity = document.createElement('div');
       opacity.className = 'opacity';
       mainWrapper.appendChild(opacity);
       //Создаем блок-обертку для изображения
       var wrapperImg = document.createElement('div');
       wrapperImg.className = 'wrapperImg';
       var wrapper = mainWrapper.appendChild(wrapperImg);
       //Создаем крестик
       var cross = document.createElement('IMG');
       cross.className = 'cross';
       cross.setAttribute('src', '/image/cross.bmp');
       wrapper.appendChild(cross);
       //Cоздаем изображение
       var...