Open Dialog

Oh hey, this is something you'll probably want to read

OK 👍

<script>
	const dialog = document.querySelector('#demo-dialog-waapi');
	const open = document.querySelector('#demo-dialog-waapi-open');
	const close = document.querySelector('#demo-dialog-waapi-close');

	open.addEventListener('click', toggle);
	close.addEventListener('click', toggle);

	function toggle() {
		let is_opening = !dialog.open;
		let translate = is_opening ? ['0 20px', '0 0'] : ['0 0', '0 20px'];
		let opacity = is_opening ? ['0', '1'] : ['1', '0'];
		if (is_opening) dialog.showModal();

		window.requestAnimationFrame(() => {
			let animation = dialog.animate(
				{
					translate,
					opacity,
				},
				{
					duration: 300,
					easing: 'ease-in-out',
					fill: 'forwards',
				},
			);
			animation.onfinish = () => {
				if (!is_opening) dialog.close();
			};
		});
	}
</script>

<button id="demo-dialog-waapi-open">Open Dialog</button>
<dialog id="demo-dialog-waapi">
	<p>Oh hey, this is something you'll probably want to read</p>
	<button id="demo-dialog-waapi-close">OK 👍</button>
</dialog>