Using the <dialog>
element and animating it using in-built attribute open
and showModal()
function along with a custom attribute close
.
๐ก Note: Closing the modal automatically by using an event listener animationend
requires the use of {once: true}
.
closeModalButton.addEventListener('click', () => {
modal.setAttribute('close', '');
modal.addEventListener(
'animationend',
() => {
modal.removeAttribute('close');
modal.close();
},
{ once: true }
);
});