👉 Dialog

<dialog id="dialog-1">
    <header>
        <h3>Dialog by default</h3>
        <a href="#close"><img alt="md/close" loading="lazy" src="/img/icons/md/close.svg" width="18" height="18"></a>
    </header>
    <hr>
    <section>
        Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in
        section tag Text in section tag…
    </section>
    <hr>
    <footer>
        <a href="#close">Cancel</a>
        <a href="#close">Accept</a>
    </footer>
</dialog>
<a href="#overlay"></a>
<a role="button" href="#dialog-1">Open by default</a>

Dialog by default

md/close
Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag…
Open by default
<dialog id="dialog-bottom-2">
    <header>
        <h3>Dialog from bottom</h3>
        <a href="#close"><img alt="md/close" loading="lazy" src="/img/icons/md/close.svg" width="18" height="18"></a>
    </header>
    <hr>
    <section>
        Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in
        section tag Text in section tag…
    </section>
    <hr>
    <footer>
        <a href="#close">Cancel</a>
        <a href="#close">Accept</a>
    </footer>
</dialog>
<a href="#overlay"></a>
<a role="button" href="#dialog-bottom-2">From bottom</a>

Dialog from bottom

md/close
Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag…
From bottom
<dialog id="dialog-left-3">
    <header>
        <h3>Dialog from left</h3>
        <a href="#close"><img alt="md/close" loading="lazy" src="/img/icons/md/close.svg" width="18" height="18"></a>
    </header>
    <hr>
    <section>
        Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in
        section tag Text in section tag…
    </section>
    <hr>
    <footer>
        <a href="#close">Cancel</a>
        <a href="#close">Accept</a>
    </footer>
</dialog>
<a href="#overlay"></a>
<a role="button" href="#dialog-left-3">Left</a>

Dialog from left

md/close
Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag…
Left
<dialog id="dialog-right-4">
    <header>
        <h3>Dialog from right</h3>
        <a href="#close"><img alt="md/close" loading="lazy" src="/img/icons/md/close.svg" width="18" height="18"></a>
    </header>
    <hr>
    <section>
        Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in
        section tag Text in section tag…
    </section>
    <hr>
    <footer>
        <a href="#close">Cancel</a>
        <a href="#close">Accept</a>
    </footer>
</dialog>
<a href="#overlay"></a>
<a role="button" href="#dialog-right-4">Right</a>

Dialog from right

md/close
Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag…
Right
<dialog id="dialog-top-5">
    <header>
        <h3>Dialog from top</h3>
        <a href="#close"><img alt="md/close" loading="lazy" src="/img/icons/md/close.svg" width="18" height="18"></a>
    </header>
    <hr>
    <section>
        Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in
        section tag Text in section tag…
    </section>
    <hr>
    <footer>
        <a href="#close">Cancel</a>
        <a href="#close">Accept</a>
    </footer>
</dialog>
<a href="#overlay"></a>
<a role="button" href="#dialog-top-5">Top</a>

Dialog from top

md/close
Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag…
Top
<dialog id="dialog-full-6">
    <header>
        <h3>Dialog fullscreen</h3>
        <a href="#close"><img alt="md/close" loading="lazy" src="/img/icons/md/close.svg" width="18" height="18"></a>
    </header>
    <hr>
    <section>
        Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in
        section tag Text in section tag…
    </section>
    <hr>
    <footer>
        <a href="#close">Cancel</a>
        <a href="#close">Accept</a>
    </footer>
</dialog>
<a role="button" href="#dialog-full-6">Fullscreen</a>

Dialog fullscreen

md/close
Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag Text in section tag…
Fullscreen