JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
  <div class="img-wrap">
    <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmFzaGlvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="">
    <button type="button" class="btn-zoomin">이미지 확대</button>
  </div>
  <div class="img-wrap">
    <img src="https://images.unsplash.com/photo-1647891941746-fe1d53ddc7a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxzZWFyY2h8MXx8ZmFzaGlvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="">
    <button type="button" class="btn-zoomin">이미지 확대</button>
  </div>
</div>

<div class="popup">
  <h2>원본 이미지 팝업</h2>
  <button class="btn-close">닫기</button>
  <div class="scroll">
    <img src="" alt="">
  </div>
  
</div>

SCSS

.wrap {
  margin: 20px;
}
.img-wrap {
  position: relative;
  margin: 10px;
  border: 2px solid #000000;
  img {
    max-width: 50%;
  }
  button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 16px;
    border: 1px solid #000000;
    background: #FFFFFF;
  }
}

.popup {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: -1;
  /* margin: auto; */
  padding: 20px;
  border: 2px solid red;
  background: #FFFFFF;
  opacity: 0;
  &.active {
    opacity: 1;
    z-index: 99;
  }
  .scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    border: 1px solid #000000;
    background: #FFFFFF;
  }
}

JavaScript

$('.btn-zoomin').on('click', function(e){
	/* console.log($(this)) */
  const imgSrc = $(this).closest('.img-wrap').children('img').attr('src');
  $('.popup').children().children('img').attr('src', imgSrc)
  $('.popup').addClass('active');
})

$('.btn-close').on('click', function(e){
	$(this).parent('.popup').removeClass('active');
})