Dialog 태그로 modal 만들기


Dialog 태그로 modal 만들기

1. 기본적인 형태 // html <button>Show modal</button> <dialog> Hello! I'm a modal! </dialog> // js const button = document.querySelector('button'); const dialog = document.querySelector('dialog'); // 버튼을 클릭하면 modal이 보여진다. button.addEventListener('click', () => { dialog.showModal(); }) // react-version const buttonRef = useRef(); const onClick = () => { buttonRef.current.showModal(); } <button onClick={onClick}>Show modal</button> <dialog ref={buttonRef}> Hello! I'm a modal! </dialog> 기본적으로 modal이 열린 상태...


#CSS #dialog #HTML #Modal #노마드코더

원문링크 : Dialog 태그로 modal 만들기