--- title: The HTML dialog tag | daily.dev description: An overview of the native HTML dialog element for building accessible modals without hand-rolled div-based solutions. Covers basic markup, showModal() vs... canonical: https://daily.dev/posts/the-html-dialog-tag-w9my1ll34 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The HTML dialog tag | daily.dev og:description: An overview of the native HTML dialog element for building accessible modals without hand-rolled div-based solutions. Covers basic markup, showModal() vs... og:url: https://daily.dev/posts/the-html-dialog-tag-w9my1ll34 og:image: https://api.daily.dev/og/posts/W9mY1lL34.png og:image:alt: The HTML dialog tag og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The HTML dialog tag **[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 2 min read · 2 upvotes · 1 comments ## Summary An overview of the native HTML dialog element for building accessible modals without hand-rolled div-based solutions. Covers basic markup, showModal() vs show(), closing dialogs with returnValue, using forms with method="dialog" to replace JavaScript confirm prompts, styling the backdrop with the ::backdrop pseudo-element, and why dialog beats a div modal (built-in focus trapping, focus return, top-layer rendering, no z-index issues). ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is the difference between showModal() and show() on an HTML dialog element? showModal() opens the dialog as a true modal: it adds a backdrop, traps focus inside the dialog, and blocks interaction with the rest of the page. show() opens it as a non-modal panel with no backdrop and no focus trap, so the user can still interact with the rest of the page. showModal() is the right choice for most modal use cases. _daily.dev surfaces practical HTML API breakdowns like this for developers choosing modal patterns._ ### How do I close an HTML dialog and get a return value from a form submitted inside it? Call dialog.close() to dismiss it, optionally passing a value like dialog.close('saved') that becomes accessible via dialog.returnValue. Inside a form with method="dialog", clicking a submit button closes the dialog automatically and sets returnValue to that button's value attribute, replacing the older JavaScript confirm() pattern for yes/no prompts. _Developers building form-driven modal workflows can find implementation details like this on daily.dev._ ### How do you style the dark overlay behind a native HTML dialog? Use the ::backdrop pseudo-element, for example dialog::backdrop { background: rgba(0, 0, 0, 0.5); }, to style the dimmed area behind an open dialog. The dialog element itself can be styled with normal CSS rules like border, padding, and custom properties, since it renders in the browser's top layer above everything else, avoiding z-index stacking issues. _daily.dev helps developers track native CSS and HTML techniques like backdrop styling as they replace older patterns._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > Great explanation, especially the `returnValue` form flow. Thanks for keeping the examples practical! ## Similar posts on daily.dev - [Using and Styling the Dialog Element](https://daily.dev/posts/using-and-styling-the-dialog-element-gqfboerxc) · CSS-Tricks · 16 upvotes · 0 comments - [Open dialogs with command and commandfor](https://daily.dev/posts/open-dialogs-with-command-and-commandfor-efxmajais) · RUBYLAND · 1 upvotes · 0 comments - [How to Create Accessible Modals and Pop-ups Using HTML, CSS, and Minimal JavaScript](https://daily.dev/posts/how-to-create-accessible-modals-and-pop-ups-using-html-css-and-minimal-javascript-at8bzvf5o) · freeCodeCamp · 35 upvotes · 3 comments - [Baseline Layered UI Patterns:

and popover](https://daily.dev/posts/baseline-layered-ui-patterns-dialog-and-popover-vaegynh8z) · OddBird · 2 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/the-html-dialog-tag-w9my1ll34) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The HTML dialog tag","url":"https://daily.dev/posts/the-html-dialog-tag-w9my1ll34","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-html-dialog-tag-w9my1ll34"},"datePublished":"2026-08-18T05:23:54.312Z","dateModified":"2026-09-14T08:45:27.533Z","description":"An overview of the native HTML dialog element for building accessible modals without hand-rolled div-based solutions. Covers basic markup, showModal() vs...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7219243bb6b6113ecc90bd933965a4ef?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7219243bb6b6113ecc90bd933965a4ef?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Flavio Copes","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Flavio Copes","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/1f2dbd275797411bbd37bfdaaf0951a9","url":"https://daily.dev/sources/flaviocopes"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/the-html-dialog-tag-w9my1ll34","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,html,accessibility,web-components","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Flavio Copes","item":"https://daily.dev/sources/flaviocopes"},{"@type":"ListItem","position":3,"name":"The HTML dialog tag"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-html-dialog-tag-w9my1ll34","comment":[{"@type":"Comment","text":"Great explanation, especially the returnValue form flow. Thanks for keeping the examples practical!","datePublished":"2026-08-27T15:33:44.946Z","url":"https://daily.dev/posts/W9mY1lL34#c-JBjjhOhSQ","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-html-dialog-tag-w9my1ll34#faq","mainEntity":[{"@type":"Question","name":"What is the difference between showModal() and show() on an HTML dialog element?","acceptedAnswer":{"@type":"Answer","text":"showModal() opens the dialog as a true modal: it adds a backdrop, traps focus inside the dialog, and blocks interaction with the rest of the page. show() opens it as a non-modal panel with no backdrop and no focus trap, so the user can still interact with the rest of the page. showModal() is the right choice for most modal use cases. daily.dev surfaces practical HTML API breakdowns like this for developers choosing modal patterns."}},{"@type":"Question","name":"How do I close an HTML dialog and get a return value from a form submitted inside it?","acceptedAnswer":{"@type":"Answer","text":"Call dialog.close() to dismiss it, optionally passing a value like dialog.close('saved') that becomes accessible via dialog.returnValue. Inside a form with method=\"dialog\", clicking a submit button closes the dialog automatically and sets returnValue to that button's value attribute, replacing the older JavaScript confirm() pattern for yes/no prompts. Developers building form-driven modal workflows can find implementation details like this on daily.dev."}},{"@type":"Question","name":"How do you style the dark overlay behind a native HTML dialog?","acceptedAnswer":{"@type":"Answer","text":"Use the ::backdrop pseudo-element, for example dialog::backdrop { background: rgba(0, 0, 0, 0.5); }, to style the dimmed area behind an open dialog. The dialog element itself can be styled with normal CSS rules like border, padding, and custom properties, since it renders in the browser's top layer above everything else, avoiding z-index stacking issues. daily.dev helps developers track native CSS and HTML techniques like backdrop styling as they replace older patterns."}}]} ```