การสร้างคอมโพเนนต์โมดัลด้วย Portals

ยินดีต้อนรับ

โครงร่างคอมโพเนนต์โมดัล

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

พื้นหลังทับและการหยุดการส่งต่อ

การปิดด้วยปุ่ม Escape

useEffect(() => {
  if (!isOpen) return;
  const handle = (e) => { if (e.key === 'Escape') onClose(); };
  document.addEventListener('keydown', handle);
  return () => document.removeEventListener('keydown', handle);
}, [isOpen, onClose]);

การป้องกันการเลื่อนของเนื้อหา

useEffect(() => {
  if (isOpen) {
    document.body.style.overflow = 'hidden';
  }
  return () => { document.body.style.overflow = ''; };
}, [isOpen]);

CSS พื้นฐานสำหรับโมดัล

.backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  padding: 24px;
  min-width: 320px;
}

การใช้โมดัล

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <h2>Hello from the modal!</h2>
        <button onClick={() => setOpen(false)}>Close</button>
      </Modal>
    </>
  );
}

การเพิ่มปุ่มปิดไว้ด้านใน

ภาพเคลื่อนไหวด้วยการเปลี่ยนผ่านของ CSS

// Toggle class based on isOpen
<div className={`backdrop ${isOpen ? 'visible' : 'hidden'}`}>

การประกอบส่วนหัวและส่วนท้ายของโมดัล

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

บทถัดไป