2022-04-21
1159
#html
Amit Merchant
101214
Apr 21, 2022 â‹… 4 min read

Why you should be using the dialog element

Amit Merchant Software developer, writer, artist, and noob gardener.

Recent posts:

Authentication And Authorization In Astro

Authentication and authorization in Astro

Implement secure authentication and role-based authorization in Astro using JWT, SSR, and Astro middleware for protected routes.

Emmanuel John
May 6, 2025 â‹… 23 min read
here's why everyone's going crazy over Zod 4

Here’s why everyone’s going crazy over Zod 4

Zod 4 is not just an update; it’s a leap forward for schema validation in TypeScript that truly lives up to the hype.

Popoola Temitope
May 5, 2025 â‹… 4 min read
A guide to the CSS cursor property

Creating custom mouse cursors with CSS

Learn what custom cursors are and how to use CSS and JavaScript to create custom cursors that will give your website a creative edge.

Samson Omojola
May 5, 2025 â‹… 8 min read
best JavaScript and HTML5 game engines

Best JavaScript and HTML5 game engines (updated for 2025)

Check out this guide, which ranks the top 10 JavaScript/HTML5 game engines by popularity, capability, and use case.

Solomon Eseme
May 2, 2025 â‹… 15 min read
View all posts

3 Replies to "Why you should be using the <code>dialog</code> element"

    1. Hey Karol,

      By using it in the production I meant the dialog element is supported by all the modern browsers except a few obscure browsers, such as IE, Opera Mini, KaiOS browser, UC browser etc, that still doesn’t support the dialog element.

      The market share of these browsers is fairly low at this point. And that’s why I said it’s safe to use it in the production.

  1. You can use another way that is much simpler for detecting outside click:

    “`
    const listener = (event: Event) => {
    if (
    event.target !== collectEmail &&
    event.composedPath().includes(collectEmail)
    ) {
    return;
    }

    // clicked outside the `collectEmail `
    };
    “`

    You’re welcome 🙂

Leave a Reply