ทำ Popup รูปภาพ ให้ภาพที่คลิกกับภาพ Popup แสดงต่างกัน ด้วย HTML CSS JS

							Copy to clipboard
							
					<!-- รูปที่กด ภาพ 1-->
<img src="https://ownd.co/wp-content/uploads/2026/02/Group-1707479366-scaled-e1773818635405.png" class="open-popup-img" style="cursor:pointer; max-width:100%;" data-popup="customPopup1" >

<!-- Popup -->
<div id="customPopup1" class="custom-popup">
  <div class="popup-content">
      <span class="close-popup">×</span>
  
          <img src="https://ownd.co/wp-content/uploads/2026/03/Frame-1707483132-scaled.png">
    
  </div>
</div>



<!-- รูปที่กด ภาพ 2 -->
<img src="https://ownd.co/wp-content/uploads/2026/03/Group-1707479366-scaled-e1773818716789.png" class="open-popup-img" style="cursor:pointer; max-width:100%;" data-popup="customPopup2">

<!-- Popup -->
<div id="customPopup2" class="custom-popup">
  <div class="popup-content">
      <span class="close-popup">×</span>
  
          <img src="https://ownd.co/wp-content/uploads/2026/03/Frame-1707483133-scaled.png">
    
  </div>
</div>



<!-- รูปที่กด ภาพ 3 -->
<img src="https://ownd.co/wp-content/uploads/2026/02/Group-1707479307.png" class="open-popup-img" style="cursor:pointer; max-width:100%;" data-popup="customPopup3">

<!-- Popup -->
<div id="customPopup3" class="custom-popup">
  <div class="popup-content">
      <span class="close-popup">×</span>
  
          <img src="https://ownd.co/wp-content/uploads/2026/03/Frame-1707483134-1.png">
    
  </div>
</div>



<style>
.custom-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 9999;
}

/* ตอนเปิด */
.custom-popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 16px;

    width: 90%;
    max-width: 700px;   /* จำกัดความกว้างสูงสุด */
    max-height: 85vh;   /* ไม่ให้สูงเกินจอ */

    overflow-y: auto;   /* ถ้าเนื้อหาเยอะให้เลื่อนในกล่อง */
    
    transform: translateY(30px) scale(.95);
    transition: all .3s ease;
}

/* ตอนเปิด */
.custom-popup.active .popup-content {
    transform: translateY(0) scale(1);
}



/* รูปใน popup */
.popup-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

/* ปุ่มปิด */
.close-popup {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 26px;
    cursor: pointer;
}
</style>
<script>
const popups = document.querySelectorAll('.custom-popup');
const openBtns = document.querySelectorAll('.open-popup-img');
const closeBtns = document.querySelectorAll('.close-popup');

// เปิด popup ตาม data-popup ของรูป
openBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const popupId = btn.getAttribute('data-popup');
    const popup = document.getElementById(popupId);
    if(popup) popup.classList.add('active');
  });
});

// ปิด popup เมื่อกดปุ่ม close
closeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const popup = btn.closest('.custom-popup');
    popup.classList.remove('active');
  });
});

// ปิด popup เมื่อคลิกพื้นที่ว่าง
popups.forEach(popup => {
  popup.addEventListener('click', (e) => {
    if(e.target === popup){
      popup.classList.remove('active');
    }
  });
});

// ปิด popup เมื่อกด Escape
document.addEventListener('keydown', (e) => {
  if(e.key === "Escape"){
    popups.forEach(popup => popup.classList.remove('active'));
  }
});
</script>