Modal

Native modal window based on <dialog> tag with ::backdrop CSS pseudo-element (pure CSS3 modal window).

Documentation:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
• https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

Modal window

<Modal id="dialog" open="Open modal">
    <main slot="main">
        <p>Some extra content you would like here</p>
        <hr />
        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
    </main>
    <Button primary slot="close" class="mt-4">Close</Button>
</Modal>

Modal with different close button

<Modal id="dialog2" open="Open modal">
    <main slot="main">
        <p>Some extra content you would like here</p>
        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
    </main>
     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
</Modal>