모달

dialog 요소를 이용해서 모달을 표현할 수 있다.

Preview

Styling and Animation for the dialog Element

The style is straightforward. The animation should use modern CSS features like allow-discrete and overlay.

HTML

CSS

JavaScript

Note

스크립트의 대부분은 애니메이션을 적용하기 위한 용도이고 열고 닫기만 하려면 element.showModal()과 element.close()만 있으면 된다. transition-behavior: allow-discrete;와 overlay 트랜지션을 지원하는 Chrome에서는 스크립트 없이 CSS 만으로도 애니메이션을 적용할 수 있다.

#dialog-styled,
#dialog-styled::backdrop {
	transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, transform 0.2s allow-discrete;
	animation: hide-modal 0.2s forwards;
}
#dialog-styled {
	animation: scale-down 0.2s forwards, hide-modal 0.2s forwards;
}
#dialog-styled[open],
#dialog-styled[open]::backdrop {
	animation: show-modal 0.2s forwards;
}
#dialog-styled[open] {
	animation: scale-up 0.2s forwards;
}

@keyframes show-modal {
	0% { opacity: 0 }
	100% { opacity: 1 }
}
@keyframes hide-modal {
	0% { opacity: 1 }
	100% { opacity: 0 }
}
@keyframes scale-up {
	0% { transform: scale(0.8) }
	100% { transform: scale(1) }
}
@keyframes scale-down {
	0% { transform: scale(1) }
	100% { transform: scale(0.8) }
}

Reference