{"id":14680,"date":"2019-01-30T14:30:28","date_gmt":"2019-01-30T13:30:28","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=14680"},"modified":"2022-11-21T08:20:20","modified_gmt":"2022-11-21T07:20:20","slug":"native-browser-dialogs-libraries","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/","title":{"rendered":"Native Browser Dialogs and HTML Dialog Libraries [State of the Web]"},"content":{"rendered":"<p>An HTML dialog is a container for content which overlaps the rest of the site and is in the foreground. From a designer&#8217;s perspective a dialog catches the focus of the user and may block the remaining content from being interacted with.<\/p>\n<p>Therefore nearly every component library supports a dialog component. Nevertheless, there is no built in dialog component on the web platform. Especially the positioning and the blocking of the background can be an error-prone task.<\/p>\n<p>Since the web is evolving and becoming more mature, a new HTML dialog element is being standardized to meet developers&#8216; needs. Today the implementation can be used directly in Chrome and in Firefox (with a flag). Hopefully in the future <a href=\"https:\/\/caniuse.com\/#search=dialog\">more browsers will add support<\/a>.<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#What-is-Expected-from-the-Standardized-Dialog-Element\" >What is Expected from the Standardized Dialog Element<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Using-the-dialog\" >Using the dialog<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Modal\" >Modal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Dialog\" >Dialog<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Capabilities-of-the-HTML-Dialog-Element\" >Capabilities of the HTML Dialog Element<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Overlaying-the-Content\" >Overlaying the Content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Changing-Size-and-Position\" >Changing Size and Position<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#No-Jumping-Background\" >No Jumping Background<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Style-Dialog-and-Contain-HTML\" >Style Dialog and Contain HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Blocking-Interaction-with-the-Background\" >Blocking Interaction with the Background<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Hiding-the-Background\" >Hiding the Background<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Stacking-HTML-Dialogs\" >Stacking HTML Dialogs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Closing-HTML-Dialog-with-a-Click-on-the-Backdrop\" >Closing HTML Dialog with a Click on the Backdrop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Closing-with-the-ESC-Key\" >Closing with the ESC Key<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Accessibility\" >Accessibility<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#Further-Reading\" >Further Reading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#All-Articles-in-this-Series\" >All Articles in this Series<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What-is-Expected-from-the-Standardized-Dialog-Element\"><\/span>What is Expected from the Standardized Dialog Element<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In this section I created some requirements the new HTML dialog element should match in order to satisfy the developers&#8216; needs.<\/p>\n<ol>\n<li>The dialog has to <b>overlay the other content<\/b> to call the users&#8216; attention and force them to interact with it.<\/li>\n<li>The dialog needs to be positioned on the page. <b>Size and position<\/b> of the dialog should be able to change.<\/li>\n<li>The alert and prompt are also elements to force a decision from the user but in distinction that the dialog element should be able to be <b>styled<\/b> and <b>contain<\/b> other <b>HTML elements.<\/b><\/li>\n<li>It should be able to <b>block the background<\/b> so no scrolling and tabbing in the background should be possible. However this should not be forced by the dialog element.<\/li>\n<li>It should be able to <b>hide<\/b> the background with something like a <b>backdrop<\/b>.<\/li>\n<li>The content behind the dialog should <b>not jump<\/b> around when the dialog opens.<\/li>\n<li>It should be possible to <b>stack <\/b>multiple dialogs.<\/li>\n<li>A <b>click on the backdrop closes the modal <\/b>if the developer implements this behaviour.<\/li>\n<li>The dialog should be <b>closed<\/b> when the <b>esc key<\/b> is pressed.<\/li>\n<li>The dialog should be <b>accessible<\/b> for humans with all kinds of disabilities.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Using-the-dialog\"><\/span>Using the dialog<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>At first it is important to get specific about the wording. A dialog is a box of content which is above the content of a page. The backdrop is something like a shadow behind an element which prohibits the interaction with the content behind it. Last but not least a modal is the combination of a dialog with a backdrop. Simply put: dialog + backdrop = modal.<\/p>\n<p>The HTML dialog <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/dialog\" target=\"_blank\" rel=\"noopener\">element<\/a>\u00a0has a single attribute. It is called <code>open<\/code> and used to show the dialog element as dialog.<\/p>\n<p>In JavaScript the <code>HTMLDialogElement<\/code> has three methods <code>show<\/code>, <code>showModal<\/code> and\u00a0<code>close<\/code>\u00a0. <code>show<\/code>\u00a0\u00a0and <code>showModal<\/code> open the dialog and display the content to the user. <code>show<\/code> opens the dialog as dialog and <code>showModal<\/code> as modal. The <code>close<\/code> method closes both variants.<\/p>\n<p>When the dialog is opened as modal, the <code>::backdrop<\/code> pseudo-element can be used in CSS to style behind the opened dialog.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Modal\"><\/span>Modal<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-default\"> <p>Klicken Sie auf den unteren Button, um den Inhalt von codesandbox.io zu laden.<\/p> <p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE1MCIgc3R5bGU9IndpZHRoOiAxMDAlOyBoZWlnaHQ6IDUwMHB4OyBib3JkZXI6IDA7IGJvcmRlci1yYWRpdXM6IDRweDsgb3ZlcmZsb3c6IGhpZGRlbjsiIHNyYz0iaHR0cHM6Ly9jb2Rlc2FuZGJveC5pby9lbWJlZC84bDJ3bHdva3o5P3ZpZXc9cHJldmlldyIgc2FuZGJveD0iYWxsb3ctbW9kYWxzIGFsbG93LWZvcm1zIGFsbG93LXBvcHVwcyBhbGxvdy1zY3JpcHRzIGFsbG93LXNhbWUtb3JpZ2luIj48L2lmcmFtZT48L3A+<\/div><\/div>\n<h4><span class=\"ez-toc-section\" id=\"Dialog\"><\/span>Dialog<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-default\"> <p>Klicken Sie auf den unteren Button, um den Inhalt von codesandbox.io zu laden.<\/p> <p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE1MCIgc3R5bGU9IndpZHRoOiAxMDAlOyBoZWlnaHQ6IDUwMHB4OyBib3JkZXI6IDA7IGJvcmRlci1yYWRpdXM6IDRweDsgb3ZlcmZsb3c6IGhpZGRlbjsiIHNyYz0iaHR0cHM6Ly9jb2Rlc2FuZGJveC5pby9lbWJlZC81MDFsa243eTNuP3ZpZXc9cHJldmlldyIgc2FuZGJveD0iYWxsb3ctbW9kYWxzIGFsbG93LWZvcm1zIGFsbG93LXBvcHVwcyBhbGxvdy1zY3JpcHRzIGFsbG93LXNhbWUtb3JpZ2luIj48L2lmcmFtZT48L3A+<\/div><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Capabilities-of-the-HTML-Dialog-Element\"><\/span>Capabilities of the HTML Dialog Element<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This section I will check if the dialog can match the requirements. Therefore I provide a codesandbox which shows my implementation. You can check and edit it with Google Chrome.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Overlaying-the-Content\"><\/span>Overlaying the Content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Creating an overlay above the main content is the key feature of the dialog and therefore it is no surprise that this works as expected. Even with <em>z-index<\/em> it is not possible to overlay the dialog content. You can see the code <a href=\"https:\/\/codesandbox.io\/s\/501lkn7y3n\">here<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Changing-Size-and-Position\"><\/span>Changing Size and Position<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The dialog can be changed like all block elements in size and position with the exception of the left and right properties. <i>width<\/i> and <i>height<\/i> are used to change the size of the dialog. With <i>top<\/i> and <i>bottom<\/i> the positioning of the dialog can be changed. The horizontal alignment can be changed with <i>left<\/i> and <i>right<\/i>. But because both values are set originally to zero, <i>left<\/i> and <i>right<\/i> need to be set together. The one for positioning to the absolute value and the other to <i>auto<\/i>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"No-Jumping-Background\"><\/span>No Jumping Background<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>On macOS it doesn\u2019t jump. The site keeps its scrollability when the dialog opens, if this is not the wanted behavior, it needs to be changed manually. This can introduce some changes to the background which let it jump again. So this problem is not solved by the dialog element and still some hacks are needed to disable scrolling of the body. It&#8217;s the same problems with jumping in the background (see above).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Style-Dialog-and-Contain-HTML\"><\/span>Style Dialog and Contain HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As long as the dialog is not open, it is not displayed. Or in CSS:\u00a0<span class=\"lang:css decode:true crayon-inline\">dialog:not([open]){display: none;}<\/span>.<\/p>\n<p>And when the dialog is opened and displayed it gets a display-value of <i>block<\/i>. So nothing special here and therefore the dialog can contain any HTML as it would be a div element.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Blocking-Interaction-with-the-Background\"><\/span>Blocking Interaction with the Background<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When the site is longer and the dialog is shorter than the viewport, even with an opened dialog the pages is scrollable. Then the dialog is positioned <i>absolute<\/i>, so the dialog can be scrolled out of the viewport.<\/p>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-default\"> <p>Klicken Sie auf den unteren Button, um den Inhalt von codesandbox.io zu laden.<\/p> <p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE1MCIgc3R5bGU9IndpZHRoOiAxMDAlOyBoZWlnaHQ6IDUwMHB4OyBib3JkZXI6IDA7IGJvcmRlci1yYWRpdXM6IDRweDsgb3ZlcmZsb3c6IGhpZGRlbjsiIHNyYz0iaHR0cHM6Ly9jb2Rlc2FuZGJveC5pby9lbWJlZC8zMjB5bTltOXZtP3ZpZXc9cHJldmlldyIgc2FuZGJveD0iYWxsb3ctbW9kYWxzIGFsbG93LWZvcm1zIGFsbG93LXBvcHVwcyBhbGxvdy1zY3JpcHRzIGFsbG93LXNhbWUtb3JpZ2luIj48L2lmcmFtZT48L3A+<\/div><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Hiding-the-Background\"><\/span>Hiding the Background<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Beneath the dialog element the CSS pseudo element <code>::backdrop<\/code> is rendered. This element only appears when the dialog element is used as modal. So a <em>background-color<\/em> can be set to hide some of the background. The dialog element itself will not change.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Stacking-HTML-Dialogs\"><\/span>Stacking HTML Dialogs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A dialog in a dialog can be used by opening a second dialog. It is not possible to open the same dialog because the dialog is shown\/hidden only by CSS. A dialog opened as modal also overlays earlier opened dialogs and modals.<\/p>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-default\"> <p>Klicken Sie auf den unteren Button, um den Inhalt von codesandbox.io zu laden.<\/p> <p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE1MCIgc3R5bGU9IndpZHRoOiAxMDAlOyBoZWlnaHQ6IDUwMHB4OyBib3JkZXI6IDA7IGJvcmRlci1yYWRpdXM6IDRweDsgb3ZlcmZsb3c6IGhpZGRlbjsiIHNyYz0iaHR0cHM6Ly9jb2Rlc2FuZGJveC5pby9lbWJlZC9sNzgyMHI0cnk5IiBzYW5kYm94PSJhbGxvdy1tb2RhbHMgYWxsb3ctZm9ybXMgYWxsb3ctcG9wdXBzIGFsbG93LXNjcmlwdHMgYWxsb3ctc2FtZS1vcmlnaW4iPjwvaWZyYW1lPjwvcD4=<\/div><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Closing-HTML-Dialog-with-a-Click-on-the-Backdrop\"><\/span>Closing HTML Dialog with a Click on the Backdrop<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Natively nothing happens when clicking the backdrop. Strictly speaking the backdrop is part of the dialog element.<\/p>\n<p>Adding an event listener to the backdrop is not possible since it is only a pseudo element. But an event listener can be added to the dialog which catches clicks on the backdrop and the dialog itself.<\/p>\n<p>The next step is to disable the propagation of events from inside the dialog into the dialog element. Therefore the first child of the dialog is a container which stops events to propagate upwards.<\/p>\n<p>Now the dialog only gets events from the backdrop. So an event listener on the dialog can close the dialog on click.<\/p>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-default\"> <p>Klicken Sie auf den unteren Button, um den Inhalt von codesandbox.io zu laden.<\/p> <p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE1MCIgc3R5bGU9IndpZHRoOiAxMDAlOyBoZWlnaHQ6IDUwMHB4OyBib3JkZXI6IDA7IGJvcmRlci1yYWRpdXM6IDRweDsgb3ZlcmZsb3c6IGhpZGRlbjsiIHNyYz0iaHR0cHM6Ly9jb2Rlc2FuZGJveC5pby9lbWJlZC80bDNtdzE4dnp4IiBzYW5kYm94PSJhbGxvdy1tb2RhbHMgYWxsb3ctZm9ybXMgYWxsb3ctcG9wdXBzIGFsbG93LXNjcmlwdHMgYWxsb3ctc2FtZS1vcmlnaW4iPjwvaWZyYW1lPjwvcD4=<\/div><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Closing-with-the-ESC-Key\"><\/span>Closing with the ESC Key<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The dialog element natively supports the closing via the ESC key when it is used as modal. Dialogs can\u2019t be closed natively via ESC key so you have to implement it yourself, if need be.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Accessibility\"><\/span>Accessibility<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>According to the specification for the dialog element the ARIA role <i>dialog<\/i> needs to be set. Also the ARIA property modal is inherited by dialog. Therefore a browser which fulfills the requirements implements the dialog elements which can be interpreted by accessibility helper tools.<\/p>\n<p>Also the specification forces the focus onto the dialog after the dialog opens. So the accessibility tools move the focus of the user to the dialog.<\/p>\n<p>Chrome does set the ARIA role and properties and sets the focus to the dialog.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The HTML dialog element will ease the use of dialogs and modals in upcoming browser versions. The component libraries can remove much code and use the browser implementation of the dialog element.<\/p>\n<p>Unfortunately the dialog element is only supported <a href=\"https:\/\/caniuse.com\/#search=dialog\" target=\"_blank\" rel=\"noopener\">in Chrome and behind a flag in Firefox<\/a> right now. Therefore it will take some time until the native dialog element can be used. Google provides a polyfill but in my opinion the component libraries will rather keep their own coded dialog and only new libraries will use the polyfill.<\/p>\n<p>All in all I like the approach to create a standard for a widely used technique, thus it will be harmonized between different browsers and component libraries.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Further-Reading\"><\/span>Further Reading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::backdrop\">MDN &#8211; CSS::backdrop<\/a><\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/dialog\">MDN &#8211; HTML dialog Element<\/a><\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLDialogElement\">MDN &#8211; HTMLDialogElement in Javascript<\/a><\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/html52\/interactive-elements.html#the-dialog-element\">W3C HTML5 Specification<\/a><\/p>\n<p>[hoops name=&#8220;CanIUse&#8220;]<\/p>\n<h2><span class=\"ez-toc-section\" id=\"All-Articles-in-this-Series\"><\/span>All Articles in this Series<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.inovex.de\/blog\/screenshot-testing-mit-backstopjs-sotw\/\">Screenshot Testing mit BackstopJS<\/a><\/li>\n<li><a href=\"https:\/\/www.inovex.de\/blog\/css-scroll-snap-state-of-the-web\/\">CSS Scroll Snap<\/a><\/li>\n<li><a href=\"https:\/\/www.inovex.de\/blog\/webauthn-authentication\/\">WebAuthn<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>An HTML dialog is a container for content which overlaps the rest of the site and is in the foreground. From a designer&#8217;s perspective a dialog catches the focus of the user and may block the remaining content from being interacted with. Therefore nearly every component library supports a dialog component. Nevertheless, there is no [&hellip;]<\/p>\n","protected":false},"author":99,"featured_media":15218,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[70],"service":[420,444],"coauthors":[{"id":99,"display_name":"Arne Maier","user_nicename":"amaier"}],"class_list":["post-14680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web","service-apps","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Native Browser Dialogs and HTML Dialog Libraries [State of the Web] - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Since the web is evolving and becoming more mature, a new HTML Dialog element is being standardized to meet developers&#039; needs. Today the implementation can be used directly in Chrome already\u2014here&#039;s what you need to know.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Native Browser Dialogs and HTML Dialog Libraries [State of the Web] - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Since the web is evolving and becoming more mature, a new HTML Dialog element is being standardized to meet developers&#039; needs. Today the implementation can be used directly in Chrome already\u2014here&#039;s what you need to know.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-30T13:30:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-21T07:20:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Arne Maier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Arne Maier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Arne Maier\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/\"},\"author\":{\"name\":\"Arne Maier\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/f123e489a3b6b9db2c095af50aaaee4b\"},\"headline\":\"Native Browser Dialogs and HTML Dialog Libraries [State of the Web]\",\"datePublished\":\"2019-01-30T13:30:28+00:00\",\"dateModified\":\"2022-11-21T07:20:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/\"},\"wordCount\":1316,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png\",\"keywords\":[\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/\",\"url\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/\",\"name\":\"Native Browser Dialogs and HTML Dialog Libraries [State of the Web] - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png\",\"datePublished\":\"2019-01-30T13:30:28+00:00\",\"dateModified\":\"2022-11-21T07:20:20+00:00\",\"description\":\"Since the web is evolving and becoming more mature, a new HTML Dialog element is being standardized to meet developers' needs. Today the implementation can be used directly in Chrome already\u2014here's what you need to know.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png\",\"width\":1920,\"height\":1080,\"caption\":\"A stylized globe with the title of this article on a rose ribbon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inovex.de\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Native Browser Dialogs and HTML Dialog Libraries [State of the Web]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inovex.de\/de\/#website\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inovex.de\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inovexde\",\"https:\/\/x.com\/inovexgmbh\",\"https:\/\/www.instagram.com\/inovexlife\/\",\"https:\/\/www.linkedin.com\/company\/inovex\",\"https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/f123e489a3b6b9db2c095af50aaaee4b\",\"name\":\"Arne Maier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/782b0621bc107cc45bae3de44f518b7a\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/20f445c19bcc18c0aa7c0d49f1596feded262983c108ef60ce41abffe5c4589b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/20f445c19bcc18c0aa7c0d49f1596feded262983c108ef60ce41abffe5c4589b?s=96&d=retro&r=g\",\"caption\":\"Arne Maier\"},\"url\":\"https:\/\/www.inovex.de\/de\/blog\/author\/amaier\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Native Browser Dialogs and HTML Dialog Libraries [State of the Web] - inovex GmbH","description":"Since the web is evolving and becoming more mature, a new HTML Dialog element is being standardized to meet developers' needs. Today the implementation can be used directly in Chrome already\u2014here's what you need to know.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/","og_locale":"de_DE","og_type":"article","og_title":"Native Browser Dialogs and HTML Dialog Libraries [State of the Web] - inovex GmbH","og_description":"Since the web is evolving and becoming more mature, a new HTML Dialog element is being standardized to meet developers' needs. Today the implementation can be used directly in Chrome already\u2014here's what you need to know.","og_url":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2019-01-30T13:30:28+00:00","article_modified_time":"2022-11-21T07:20:20+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png","type":"image\/png"}],"author":"Arne Maier","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw-1024x576.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Arne Maier","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten","Written by":"Arne Maier"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/"},"author":{"name":"Arne Maier","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/f123e489a3b6b9db2c095af50aaaee4b"},"headline":"Native Browser Dialogs and HTML Dialog Libraries [State of the Web]","datePublished":"2019-01-30T13:30:28+00:00","dateModified":"2022-11-21T07:20:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/"},"wordCount":1316,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png","keywords":["Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/","url":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/","name":"Native Browser Dialogs and HTML Dialog Libraries [State of the Web] - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png","datePublished":"2019-01-30T13:30:28+00:00","dateModified":"2022-11-21T07:20:20+00:00","description":"Since the web is evolving and becoming more mature, a new HTML Dialog element is being standardized to meet developers' needs. Today the implementation can be used directly in Chrome already\u2014here's what you need to know.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/html-dialog-sotw.png","width":1920,"height":1080,"caption":"A stylized globe with the title of this article on a rose ribbon"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/native-browser-dialogs-libraries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Native Browser Dialogs and HTML Dialog Libraries [State of the Web]"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/f123e489a3b6b9db2c095af50aaaee4b","name":"Arne Maier","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/782b0621bc107cc45bae3de44f518b7a","url":"https:\/\/secure.gravatar.com\/avatar\/20f445c19bcc18c0aa7c0d49f1596feded262983c108ef60ce41abffe5c4589b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/20f445c19bcc18c0aa7c0d49f1596feded262983c108ef60ce41abffe5c4589b?s=96&d=retro&r=g","caption":"Arne Maier"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/amaier\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/99"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=14680"}],"version-history":[{"count":2,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14680\/revisions"}],"predecessor-version":[{"id":39430,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14680\/revisions\/39430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/15218"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=14680"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=14680"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=14680"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=14680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}