JSFiddle - React, Tailwind, and code Playground

by ammgena

HTML

<div class='wrapper'>
  <div class='item'>
    <span class='item__text'>show first</span>
    <button data-id='#popup-1' type='button' class='item__btn'>
      popup
    </button>
  </div>
  <div class='item'>
  <span class='item__text'>show second</span>
    <button data-id='#popup-2' type='button' class='item__btn'>
      popup
    </button>
  </div>
</div>

<div class='popup'>
  <div class="popup__content">
    <button type="button" class="popup__btn-close"></button>
    <img id='popup-1' class="popup__img" src='https://picsum.photos/300/200'>
  </div>
</div>
<div class='popup'>
  <div class="popup__content">
    <button type="button" class="popup__btn-close"></button>
    <img id='popup-2' class="popup__img" src='https://picsum.photos/200/300'>
  </div>
</div>

SCSS

.wrapper {
  display: flex;
  flex-direction: row;
}

.item {
  padding: 20px;
  max-width: 200px;
  height: auto;
  margin-right: 30px;
  border: 1px solid gray;
  &__text {
    font-size: 12px;
  }
  &__btn {
    outline: none;
    border: none;
    border-radius: 4px;
    background: #0084ff;
    color: #fff;
    cursor: pointer;

    &:hover {
      background: #008400;
    }
  }
}

.popup {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  overflow: auto;

  &__content {
    max-width: 1170px;
    width: 80%;
    margin: 150px auto;
    box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
  }

  &__btn-close {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .btn-close %7B fill: %23579bde; fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath id='Forma_1' data-name='Forma 1' class='btn-close' d='M16,1A15,15,0,1,0,31,16,14.957,14.957,0,0,0,16,1Zm2.182,15.273L23.3,21.386a0.659,0.659,0,0,1,0,.955l-0.954.954a0.737,0.737,0,0,1-.477.2,0.619,0.619,0,0,1-.477-0.2l-5.114-5.114a0.33,0.33,0,0,0-.477,0L10.682,23.3a0.736,0.736,0,0,1-.477.2,0.619,0.619,0,0,1-.477-0.2l-0.955-.954a0.659,0.659,0,0,1,0-.955l5.114-5.114a0.33,0.33,0,0,0,0-.477L8.773,10.682a0.659,0.659,0,0,1,0-.955l0.955-.954a0.659,0.659,0,0,1,.955,0L15.8,13.886a0.33,0.33,0,0,0,.477,0l5.114-5.114a0.736,0.736,0,0,1,.477-0.2,0.619,0.619,0,0,1,.477.2L23.3,9.727a0.659,0.659,0,0,1,0,.955L18.182,15.8A0.327,0.327,0,0,0,18.182,16.273Z'/%3E%3C/svg%3E%0A");
    background-size: contain;
    border: 0;
    border-radius: 50%;
    position: absolute;
    height: 32px;
    margin: 0;
    padding: 0;
    right: 5%;
    top: 5%;
    width: 32px;

    &:hover {
      filter: brightness(120%);
    }
  }
}

JavaScript

const itemBtn = '.item__btn';
const popupCls = '.popup__btn-close';

$(itemBtn).on('click', function () {
	const data = $(this).data('id').replace('#', ''),
  			popupImg = 'img#' + data;
	$(popupImg).closest('.popup').show();
});

$(popupCls).on('click', function () {
	$('.popup').hide();
});