JSFiddle - React, Tailwind, and code Playground

by leramadova

HTML

<img src="https://i.ibb.co/RzQsnr9/11.jpg" padding-right: 10px">
<img src="https://i.ibb.co/6yQ1JBL/22.jpg" padding-right: 10px">
<img src="https://i.ibb.co/f28CsM7/33.jpg" padding-right: 10px">

<div class="black"></div>
<div class="modal">
  <span id="prv">prev</span>
  <span id="nxt">next</span>
  <span class="close">&times;</span>
  <img class="modal_img">
</div>

CSS

.modal {
  display: none; /*Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    /* border: 2px solid red; */
}


.modal_img {
  margin: auto;
  display: block;
  width: 100%;
  width: 300px;
  height: auto;
}

/* The Close Button */
.close {
  position: absolute;
  top: 0;
  right: 10px;
  color: #777;
  font-size: 40px;
  line-height: 1;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#prv {
  position: absolute;
  bottom: 0;
  left: 10px;
  color: red;
  font-size: 30px;
  line-height: 1;
}

#prv:hover,
#prv:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

#nxt {
  position: absolute;
  bottom: 0;
  right: 10px;
  color: red;
  font-size: 30px;
  line-height: 1;
}

#nxt:hover,
#nxt:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.black {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.4;
  top: 0;
  left: 0;
}

JavaScript

var modal = document.querySelector(".modal");
var black = document.querySelector(".black");
var img = document.querySelectorAll("img");
var modalImg = document.querySelector(".modal_img");
var prv = document.getElementById('prv');
var nxt = document.getElementById('nxt');

for(var i = 0; i < img.length; i++) {
  img[i].addEventListener('click', function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    black.style.display = "block"; 
  });  


  prv.addEventListener('click', function() {
  	//???
  });

  nxt.addEventListener('click', function() {
  	//???
  })


}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
  black.style.display = "none";
}

var black = document.querySelector(".black");
black.onclick = function() { 
  modal.style.display = "none";
  black.style.display = "none";
}