CINXE.COM
Creating a modal using the dialog HTML element - Bleech
<!DOCTYPE html> <html class="html post-template-default single single-post postid-12375 single-format-standard wp-embed-responsive" lang="de_DE"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="alternate" type="application/rss+xml" title="Bleech Feed" href="https://bleech.de/feed/"> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel="alternate" hreflang="en" href="https://bleech.de/en/blog/creating-a-modal-using-the-dialog-html-element/" /> <link rel="alternate" hreflang="de" href="https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/" /> <link rel="alternate" hreflang="x-default" href="https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/" /> <!-- This site is optimized with the Yoast SEO plugin v23.9 - https://yoast.com/wordpress/plugins/seo/ --> <title>Creating a modal using the dialog HTML element - Bleech</title> <meta name="description" content="Making modals used to be hard and complicated, not anymore! Things got a whole lot easier once the dialog element came into play. In this article you'll learn how to create reusable modals with the native dialog HTML element." /> <link rel="canonical" href="https://bleech.de/en/blog/creating-a-modal-using-the-dialog-html-element/" /> <meta property="og:locale" content="de_DE" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Creating a modal using the dialog HTML element - Bleech" /> <meta property="og:description" content="Making modals used to be hard and complicated, not anymore! Things got a whole lot easier once the dialog element came into play. In this article you'll learn how to create reusable modals with the native dialog HTML element." /> <meta property="og:url" content="https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/" /> <meta property="og:site_name" content="Bleech" /> <meta property="article:published_time" content="2023-09-19T09:00:23+00:00" /> <meta property="article:modified_time" content="2023-09-19T13:24:06+00:00" /> <meta property="og:image" content="https://bleech.de/wp-content/uploads/2023/09/dialog-element-ft-image.png" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="720" /> <meta property="og:image:type" content="image/png" /> <meta name="author" content="Manos Menexis" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:label1" content="Verfasst von" /> <meta name="twitter:data1" content="Manos Menexis" /> <meta name="twitter:label2" content="Geschätzte Lesezeit" /> <meta name="twitter:data2" content="4 Minuten" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/#article","isPartOf":{"@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/"},"author":{"name":"Manos Menexis","@id":"https://bleech.de/#/schema/person/e3bdf865faa80fee58d424b3d038d56a"},"headline":"Creating a modal using the dialog HTML element","datePublished":"2023-09-19T09:00:23+00:00","dateModified":"2023-09-19T13:24:06+00:00","mainEntityOfPage":{"@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/"},"wordCount":732,"publisher":{"@id":"https://bleech.de/#organization"},"image":{"@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/#primaryimage"},"thumbnailUrl":"https://bleech.de/wp-content/uploads/2023/09/dialog-element-ft-image.png","articleSection":["Development","UX / UI"],"inLanguage":"de"},{"@type":"WebPage","@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/","url":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/","name":"Creating a modal using the dialog HTML element - Bleech","isPartOf":{"@id":"https://bleech.de/#website"},"primaryImageOfPage":{"@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/#primaryimage"},"image":{"@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/#primaryimage"},"thumbnailUrl":"https://bleech.de/wp-content/uploads/2023/09/dialog-element-ft-image.png","datePublished":"2023-09-19T09:00:23+00:00","dateModified":"2023-09-19T13:24:06+00:00","description":"Making modals used to be hard and complicated, not anymore! Things got a whole lot easier once the dialog element came into play. In this article you'll learn how to create reusable modals with the native dialog HTML element.","breadcrumb":{"@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/#primaryimage","url":"https://bleech.de/wp-content/uploads/2023/09/dialog-element-ft-image.png","contentUrl":"https://bleech.de/wp-content/uploads/2023/09/dialog-element-ft-image.png","width":1280,"height":720,"caption":"Create a modal using the dialog HTML element"},{"@type":"BreadcrumbList","@id":"https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://bleech.de/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://bleech.de/blog/"},{"@type":"ListItem","position":3,"name":"Creating a modal using the dialog HTML element"}]},{"@type":"WebSite","@id":"https://bleech.de/#website","url":"https://bleech.de/","name":"Bleech","description":"WordPress Agentur","publisher":{"@id":"https://bleech.de/#organization"},"alternateName":"Bleech","inLanguage":"de"},{"@type":"Organization","@id":"https://bleech.de/#organization","name":"Bleech","url":"https://bleech.de/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https://bleech.de/#/schema/logo/image/","url":"https://bleech.de/wp-content/uploads/2022/01/favicon-2.png","contentUrl":"https://bleech.de/wp-content/uploads/2022/01/favicon-2.png","width":512,"height":512,"caption":"Bleech"},"image":{"@id":"https://bleech.de/#/schema/logo/image/"},"sameAs":["https://www.youtube.com/@siegfried-deploy","https://www.linkedin.com/company/bleech/"]},{"@type":"Person","@id":"https://bleech.de/#/schema/person/e3bdf865faa80fee58d424b3d038d56a","name":"Manos Menexis","image":{"@type":"ImageObject","inLanguage":"de","@id":"https://bleech.de/#/schema/person/image/","url":"https://bleech.de/wp-content/uploads/external/434fb2024239cfc42dfeefa82283cec5.jpg","contentUrl":"https://bleech.de/wp-content/uploads/external/434fb2024239cfc42dfeefa82283cec5.jpg","caption":"Manos Menexis"}}]}</script> <!-- / Yoast SEO plugin. --> <link rel='dns-prefetch' href='//plausible.io' /> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='wpml-blocks-css' href='https://bleech.de/wp-content/plugins/sitepress-multilingual-cms/dist/css/blocks/styles.css?ver=4.6.14' media='all' /> <link rel='stylesheet' id='mkaz-code-syntax-prism-css-css' href='https://bleech.de/wp-content/plugins/code-syntax-block/assets/prism-onedark.css?ver=1715763791' media='all' /> <link rel='stylesheet' id='flynt-assets-css' href='https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/main.d7965196d3f0b0c7ddfe.css?ver=6.7.1' media='all' /> <link rel='stylesheet' id='borlabs-cookie-css' href='https://bleech.de/wp-content/cache/borlabs-cookie/borlabs-cookie_1_de.css?ver=2.3-45' media='all' /> <script defer data-domain='bleech.de' data-api='https://plausible.io/api/event' data-cfasync='false' event-author='Manos Menexis' event-category="Development" event-category="UX / UI" event-translation_priority="Optional" src="https://plausible.io/js/plausible.outbound-links.file-downloads.pageview-props.js?ver=2.1.4" id="plausible"></script> <script id="plausible-analytics-js-after"> window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) } </script> <script src="https://bleech.de/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <meta name="generator" content="WPML ver:4.6.14 stt:1,3;" /> <meta name='plausible-analytics-version' content='2.1.4' /> <link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/fbrfg/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/wp-content/uploads/fbrfg/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/wp-content/uploads/fbrfg/favicon-16x16.png"> <link rel="manifest" href="/wp-content/uploads/fbrfg/site.webmanifest"> <link rel="mask-icon" href="/wp-content/uploads/fbrfg/safari-pinned-tab.svg" color="#5bbad5"> <link rel="shortcut icon" href="/wp-content/uploads/fbrfg/favicon.ico"> <meta name="msapplication-TileColor" content="#dce5fd"> <meta name="msapplication-config" content="/wp-content/uploads/fbrfg/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <link rel='preload' href='https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/fonts/titillium-web-v14-latin-regular.55b29b135a9838d9e0f7.woff2' as='font' crossorigin='anonymous'> <link rel='preload' href='https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/fonts/titillium-web-v14-latin-600.37816aa7534e645dfad1.woff2' as='font' crossorigin='anonymous'> <script>!function(){let e=new URLSearchParams(window.location.search);["utm_source","utm_medium","utm_campaign","utm_term"].forEach(r=>{let t=e.get(r);t&&sessionStorage.setItem(r,t)}),document.referrer&&!document.referrer.includes(window.location.hostname)&&sessionStorage.setItem("referrer",document.referrer)}();</script> </head> <body> <a href="#mainContent" class="skipLink"> Skip to main content </a> <div class="pageWrapper"> <header class="mainHeader"> <nav is="flynt-navigation-main" class="flyntComponent" aria-label="Main"> <div class="wrapper"> <div class="container centerMaxWidthContainer"> <a class="logo" href="https://bleech.de" aria-label="Bleech"> <svg width="127" height="35" viewBox="0 0 127 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.772 0H1.021L.99 33.605h13.15c7.133.006 10.699-3.163 10.699-9.506.005-3.957-1.594-6.55-4.798-7.78a7.356 7.356 0 0 0 3.016-2.846c.64-1.143.959-2.711.959-4.705 0-3.017-.849-5.233-2.545-6.647C19.775.707 17.208 0 13.772 0ZM6.463 4.717h7.012c3.335.003 5.005 1.557 5.01 4.662-.005 3.3-1.609 4.95-4.81 4.95H6.463V4.717Zm-.008 14.224h7.305a6.643 6.643 0 0 1 3.915 1.107c1.043.738 1.565 2.02 1.565 3.847.006 1.835-.44 3.128-1.34 3.877-.9.75-2.248 1.125-4.047 1.125H6.455V18.94ZM57.304 29.075l-1.375.144c-2.449.195-4.83.292-7.143.292-2.32-.002-3.904-.477-4.755-1.425-.852-.947-1.291-2.435-1.32-4.462h15.204l.343-3.818c.006-7.494-3.425-11.242-10.29-11.242-7.102-.002-10.653 4.344-10.653 13.04-.002 4.38.79 7.57 2.376 9.566 1.587 1.997 4.192 2.995 7.818 2.995a50.521 50.521 0 0 0 9.91-1.12l-.115-3.97Zm-5.46-14.652c.767.975 1.15 2.672 1.15 5.09H42.648c.034-2.336.468-4.01 1.302-5.023.834-1.012 2.168-1.518 4-1.518 1.83-.009 3.128.475 3.894 1.45ZM79.668 29.236l1.374-.148.094 3.975a50.44 50.44 0 0 1-9.905 1.12c-3.631 0-6.239-.999-7.823-2.995-1.583-1.997-2.374-5.181-2.37-9.553 0-8.697 3.55-13.043 10.65-13.04 6.87 0 10.3 3.745 10.292 11.237l-.344 3.818H66.43c.034 2.027.475 3.515 1.323 4.462.849.948 2.434 1.423 4.755 1.426a96.236 96.236 0 0 0 7.161-.302Zm-2.936-9.722c0-2.418-.383-4.115-1.15-5.09-.765-.976-2.065-1.459-3.897-1.447-1.829 0-3.16.505-3.996 1.514-.836 1.01-1.273 2.681-1.303 5.006l10.347.017Z" fill="currentColor"/><path d="M101.259 9.29a32.688 32.688 0 0 0-6.13-.691c-3.628-.009-6.245.958-7.851 2.901-1.607 1.943-2.41 5.204-2.41 9.782 0 4.576.758 7.87 2.274 9.884 1.516 2.014 4.139 3.02 7.869 3.02 2.505-.093 4.999-.386 7.457-.878l-.144-4.267-5.74.39c-2.579-.008-4.275-.598-5.09-1.769-.814-1.17-1.222-3.292-1.222-6.363-.002-3.077.422-5.17 1.273-6.278.851-1.109 2.52-1.663 5.006-1.663 1.244 0 3.156.132 5.735.395l.199-4.217-1.226-.246ZM118.525 8.616c-2.062 0-4.301.602-6.719 1.807V.11h-5.345l-.022 33.563h5.345V14.448l.785-.297a14.847 14.847 0 0 1 4.709-.78c1.798 0 2.975.557 3.529 1.671.554 1.114.837 2.994.848 5.638v12.997h5.333v-13.15c0-4.242-.594-7.292-1.782-9.15-1.188-1.858-3.415-2.778-6.681-2.761ZM28.526.056h5.345v33.562h-5.345V.056Z" fill="currentColor"/></svg> </a> <ul class="menu"> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/team/" > <span class="menu-link-text">Team</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/services/" > <span class="menu-link-text">Services</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/produkte/" > <span class="menu-link-text">Produkte</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/siegfried-deploy-podcast/" > <span class="menu-link-text">Podcast</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page current_page_parent"> <a class="menu-link" href="https://bleech.de/blog/" > <span class="menu-link-text">Blog</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link menu-link--button" href="https://bleech.de/kontakt/" > <span class="menu-link-text">Kontakt</span> </a> </li> <li class="menu-item menu-item--lang"> <ul> <li class="wpml-ls-item wpml-ls-item-de wpml-ls-current-language wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/" class="wpml-ls-link">DE</a> </li> <li class="wpml-ls-item wpml-ls-item-en wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/en/blog/creating-a-modal-using-the-dialog-html-element/" class="wpml-ls-link">EN</a> </li> </ul> </li> </ul> </div> </div> </nav> <nav is="flynt-navigation-burger" class="flyntComponent" aria-label="Main"> <div class="wrapper"> <div class="container centerMaxWidthContainer"> <a class="logo" href="https://bleech.de" aria-label="Bleech"> <svg width="127" height="35" viewBox="0 0 127 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.772 0H1.021L.99 33.605h13.15c7.133.006 10.699-3.163 10.699-9.506.005-3.957-1.594-6.55-4.798-7.78a7.356 7.356 0 0 0 3.016-2.846c.64-1.143.959-2.711.959-4.705 0-3.017-.849-5.233-2.545-6.647C19.775.707 17.208 0 13.772 0ZM6.463 4.717h7.012c3.335.003 5.005 1.557 5.01 4.662-.005 3.3-1.609 4.95-4.81 4.95H6.463V4.717Zm-.008 14.224h7.305a6.643 6.643 0 0 1 3.915 1.107c1.043.738 1.565 2.02 1.565 3.847.006 1.835-.44 3.128-1.34 3.877-.9.75-2.248 1.125-4.047 1.125H6.455V18.94ZM57.304 29.075l-1.375.144c-2.449.195-4.83.292-7.143.292-2.32-.002-3.904-.477-4.755-1.425-.852-.947-1.291-2.435-1.32-4.462h15.204l.343-3.818c.006-7.494-3.425-11.242-10.29-11.242-7.102-.002-10.653 4.344-10.653 13.04-.002 4.38.79 7.57 2.376 9.566 1.587 1.997 4.192 2.995 7.818 2.995a50.521 50.521 0 0 0 9.91-1.12l-.115-3.97Zm-5.46-14.652c.767.975 1.15 2.672 1.15 5.09H42.648c.034-2.336.468-4.01 1.302-5.023.834-1.012 2.168-1.518 4-1.518 1.83-.009 3.128.475 3.894 1.45ZM79.668 29.236l1.374-.148.094 3.975a50.44 50.44 0 0 1-9.905 1.12c-3.631 0-6.239-.999-7.823-2.995-1.583-1.997-2.374-5.181-2.37-9.553 0-8.697 3.55-13.043 10.65-13.04 6.87 0 10.3 3.745 10.292 11.237l-.344 3.818H66.43c.034 2.027.475 3.515 1.323 4.462.849.948 2.434 1.423 4.755 1.426a96.236 96.236 0 0 0 7.161-.302Zm-2.936-9.722c0-2.418-.383-4.115-1.15-5.09-.765-.976-2.065-1.459-3.897-1.447-1.829 0-3.16.505-3.996 1.514-.836 1.01-1.273 2.681-1.303 5.006l10.347.017Z" fill="currentColor"/><path d="M101.259 9.29a32.688 32.688 0 0 0-6.13-.691c-3.628-.009-6.245.958-7.851 2.901-1.607 1.943-2.41 5.204-2.41 9.782 0 4.576.758 7.87 2.274 9.884 1.516 2.014 4.139 3.02 7.869 3.02 2.505-.093 4.999-.386 7.457-.878l-.144-4.267-5.74.39c-2.579-.008-4.275-.598-5.09-1.769-.814-1.17-1.222-3.292-1.222-6.363-.002-3.077.422-5.17 1.273-6.278.851-1.109 2.52-1.663 5.006-1.663 1.244 0 3.156.132 5.735.395l.199-4.217-1.226-.246ZM118.525 8.616c-2.062 0-4.301.602-6.719 1.807V.11h-5.345l-.022 33.563h5.345V14.448l.785-.297a14.847 14.847 0 0 1 4.709-.78c1.798 0 2.975.557 3.529 1.671.554 1.114.837 2.994.848 5.638v12.997h5.333v-13.15c0-4.242-.594-7.292-1.782-9.15-1.188-1.858-3.415-2.778-6.681-2.761ZM28.526.056h5.345v33.562h-5.345V.056Z" fill="currentColor"/></svg> </a> <button class="hamburger" type="button" data-toggle-menu aria-expanded="false" aria-controls="navigationBurger-menu"> <span class="hamburger-lines"> <span class="visuallyHidden">Toggle Menu</span> <span class="hamburger-lines--primary"></span> <span class="hamburger-lines--secondary"></span> </span> </button> </div> <div class="menu themeHero" id="navigationBurger-menu"> <span class="menu-background-stripe stripe-1"></span> <span class="menu-background-stripe stripe-2"></span> <span class="menu-background-stripe stripe-3"></span> <span class="menu-background-stripe stripe-4"></span> <span class="menu-background-stripe stripe-5"></span> <div class="menu-scroll"> <ul class="menu-list"> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/team/" > <span class="menu-link-text">Team</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/services/" > <span class="menu-link-text">Services</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/produkte/" > <span class="menu-link-text">Produkte</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/siegfried-deploy-podcast/" > <span class="menu-link-text">Podcast</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page current_page_parent"> <a class="menu-link" href="https://bleech.de/blog/" > <span class="menu-link-text">Blog</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link menu-link--button" href="https://bleech.de/kontakt/" > <span class="menu-link-text">Kontakt</span> </a> </li> <li class="menu-item menu-item--lang"> <ul> <li class="wpml-ls-item wpml-ls-item-de wpml-ls-current-language wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/" class="wpml-ls-link">DE</a> </li> <li class="wpml-ls-item wpml-ls-item-en wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/en/blog/creating-a-modal-using-the-dialog-html-element/" class="wpml-ls-link">EN</a> </li> </ul> </li> </ul> </div> </div> </div> </nav> </header> <main id="mainContent" class="mainContent" aria-label="Content"> <article class="post"> <header class="post-header"> <div class="flyntComponent" is="flynt-block-post-header"> <div class="header themeLight header--hasFeaturedImage "> <div class="container centerMaxWidthContainer"> <div class="content centerContentMaxWidthLarge"> <p class="subline textBrand"> <span class="post-category"> <span class="visuallyHidden">in</span> Development </span> </p> <h1 class="textAccent">Creating a modal using the dialog HTML element</h1> <div class="meta"> <div class="meta-container"> <div class="meta-avatar"> <img class="meta-avatarImage lazyload" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNjQnIGhlaWdodD0nNjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-src="https://bleech.de/wp-content/uploads/external/434fb2024239cfc42dfeefa82283cec5.jpg" width="64" height="64" alt="Manos Menexis"> </div> <div class="meta-info"> <div class="meta-author"> <span class="meta-authorLink"> <span class="visuallyHidden">Erstellt von</span> Manos Menexis </span> <span class="meta-date"><time datetime="2023-09-19 11:00:23">19. September 2023</time></span> </div> <p class="meta-readingtime">5 Minuten</p> </div> </div> </div> </div> <div class="excerpt centerContentMaxWidth"> <p class="p-large">Making modals used to be hard and complicated, not anymore! Things got a whole lot easier once the dialog element came into play. In this article you'll learn how to create reusable modals with the native dialog HTML element.</p> </div> </div> </div> <div class="featuredImage centerMaxWidthContainer"> <figure class="figure"> <img class="post-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-1440x810-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTQ0MCcgaGVpZ2h0PSc4MTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-2390x1344-c-default.png 2390w, https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-1440x810-c-default.png 1440w, https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-1080x608-c-default.png 1080w, https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-720x405-c-default.png 720w" data-sizes="auto" alt="Create a modal using the dialog HTML element"> </figure> </div> </div> </header> <section class="post-main is-layout-constrained"> <h2 class="wp-block-heading">Introduction</h2> <p>Back in the day, making a modal was a real challenge that needed loads of work and know-how. You had to really think about how to make it easy to use and accessible, deal with where the focus goes, handle keyboard events, and all that jazz. But things got a whole lot easier once the dialog element came into play.</p> <p>The purpose of the <strong><code><dialog></code></strong> element is to simplify the processes of creating modals or floating interactive elements that appear on user interaction. A dialog will interrupt the typical user flow, usually to display important information, collect user input, or confirm actions.</p> <p>Here is a simple example on how the dialog works:</p> <pre class="wp-block-code"><code lang="markup" class="language-markup"><dialog id="dialog"> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere mollitia iste, praesentium sint expedita culpa, veniam dolorem ipsam alias iusto labore quas, quia non minima repellendus. Excepturi laboriosam harum sunt.</p> <button id="close-dialog">Close</button> </dialog> <button id="open-dialog">Open Dialog</button> <script> const dialog = document.getElementById("dialog"); const dialogOpen = document.getElementById("open-dialog"); const dialogClose = document.getElementById("close-dialog"); dialogOpen.addEventListener("click", () => { dialog.show(); }); dialogClose.addEventListener("click", () => { dialog.close(); }); </script></code></pre> <p>And that’s it. There are two methods you can call to open the dialog.</p> <ul class="wp-block-list"> <li><code>dialog.show()</code> – Displays the dialog without a backdrop positioned absolute relative to the document flow.</li> </ul> <div class="flyntComponent componentSpacing " is="flynt-block-video-local"> <div class="container centerMaxWidthContainer"> <div class="content centerContentMaxWidth"> <div class="video-wrapper video-wrapper-blue video-wrapper-noBlock"> <video style="aspect-ratio: 3.31333333333" class="video lazyload" preload="metadata" data-autoplay muted="1" loop="1" playsinline="1" > <source src="https://bleech.de/wp-content/uploads/2023/09/dialog-example-1.mp4#t=0.001" type=""> The HTML video player is not supported on your device. </video> <button class="video-playButton"><span class="visuallyHidden">Play video</span></button> </div> </div> </div> </div> <ul class="wp-block-list"> <li><code>dialog.showModal()</code> – Displays a modal-type dialog in a fixed position with a backdrop, blocking interactions with the regular flow.</li> </ul> <div class="flyntComponent componentSpacing " is="flynt-block-video-local"> <div class="container centerMaxWidthContainer"> <div class="content centerContentMaxWidth"> <div class="video-wrapper video-wrapper-blue video-wrapper-noBlock"> <video style="aspect-ratio: 1.37482710927" class="video lazyload" preload="metadata" data-autoplay muted="1" loop="1" playsinline="1" > <source src="https://bleech.de/wp-content/uploads/2023/09/dialog-modal-example.mp4#t=0.001" type=""> The HTML video player is not supported on your device. </video> <button class="video-playButton"><span class="visuallyHidden">Play video</span></button> </div> </div> </div> </div> <h2 class="wp-block-heading">Closing the modal on background clicks</h2> <p>When dialogs are used to provide information or an action that is not mandatory for the user experience, it is a good idea to make the dialog easily dismissible. The following example shows how to close the modal when clicking anything outside of the dialog element.</p> <pre class="wp-block-code"><code lang="javascript" class="language-javascript">const dialog = document.getElementById("dialog"); const dialogOpen = document.getElementById("open-dialog"); const dialogClose = document.getElementById("close-dialog"); dialogOpen.addEventListener("click", openDialog); dialogClose.addEventListener("click", closeDialog); function openDialog() { dialog.showModal() dialog.addEventListener("click", closeDialogOnClickOutside) } function closeDialog() { dialog.close() dialog.removeEventListener("click", closeDialogOnClickOutside) } function closeDialogOnClickOutside (event) { event.target === dialog && closeDialog() }</code></pre> <p>Wrapping the content of the dialog with a div ensures that the event.target is not the dialog when the user clicks on the content. This is what makes the closeDialogOnClickOutside functions a one liner.</p> <pre class="wp-block-code"><code lang="markup" class="language-markup"><dialog id="dialog" class="modal"> <div class="modal-content"> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere mollitia iste, praesentium sint expedita culpa, veniam dolorem ipsam alias iusto labore quas, quia non minima repellendus. Excepturi laboriosam harum sunt.</p> <button id="close-dialog">Close</button> </div> </dialog> <button id="open-dialog"> Open Dialog </button></code></pre> <p>After taking care of the markup we will need to remove any padding around the dialog element and style the .modal-content instead.</p> <pre class="wp-block-code"><code lang="css" class="language-css">/* Dialog Reset */ dialog { border: 0; padding: 0; background: transparent; max-inline-size: min(65ch, 100% - 3rem); } .modal-content { padding: 2rem; background-color: #fff; }</code></pre> <h2 class="wp-block-heading">Creating a component</h2> <p>I like looking at web development as this big puzzle. We usually like to create patterns that we can use to connect 4 worlds: HTML, CSS, JavaScript and Data. We create (puzzle) pieces of reusable code that we then connect to create interfaces. One of the most common patterns in the frontend world is Components.</p> <p>Below, I’ve created an example on how I would structure my code to create a reusable <code>modal</code> component using plain HTML, CSS and JavaScript. You can also find a Flynt Component that you can drop into your project right away: <a href="https://github.com/Skil3e/flynt-components/tree/main/ElementModal" target="_blank" rel="noreferrer noopener nofollow">View on GitHub</a>.</p> <figure class="wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen" style="--iframe-height:480px"><div class="wp-block-embed__wrapper"> <iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="DialogModal Component" src="https://codepen.io/skil3e/embed/preview/oNJzZpX?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=oNJzZpX#?secret=5DdwUUHUIF" data-secret="5DdwUUHUIF" scrolling="no" frameborder="0" height="300"></iframe> </div></figure> <h2 class="wp-block-heading">Why you should use it</h2> <ol class="wp-block-list"> <li><strong>Accessibility</strong>: The <strong><code><dialog></code></strong> element is designed to be accessible, making it a valuable choice for developers committed to creating inclusive web experiences. It follows best practices for keyboard navigation and screen reader compatibility.</li> <li><strong>Ease of Use</strong>: Implementing a modal dialog with <strong><code><dialog></code></strong> is straightforward. You only need to define the dialog’s content within the element, set its ID, and handle its display and interaction through JavaScript.</li> <li><strong>Focus Management</strong>: The <strong><code><dialog></code></strong> element automatically manages the focus within the dialog, preventing users from tabbing outside the modal, which is essential for accessibility and a smoother user experience.</li> <li><strong>No dependencies:</strong> No need to load any external JavaScript libraries.</li> </ol> <h2 class="wp-block-heading">Why you might want to avoid the dialog element</h2> <p>The dialog element can be a useful tool in certain situations, but there are cases where it might be more suitable to use a JavaScript library or framework instead. Here are some scenarios when you might want to avoid using the <strong><code><dialog></code></strong> element and opt for a library or framework:</p> <ol class="wp-block-list"> <li><strong>Legacy Browser Support</strong>: If your project requires support for older browsers (mainly Internet Explorer) that do not support the <strong><code><dialog></code></strong> element, using a JavaScript library can be the only viable option to implement modal dialogs.</li> <li><strong>Complex Interactions</strong>: If your modal dialogs involve complex interactions, such as multi-step forms, dynamic content loading, or integration with other components, using a library like Solid, React, or Vue.js can help manage these interactions more effectively.</li> <li><strong>Animations and Transitions</strong>: Creating smooth animations and transitions in modal dialogs may be challenging with just the <strong><code><dialog></code></strong> element. JavaScript libraries often provide more advanced animation options and transitions that can enhance the user experience.</li> </ol> <h2 class="wp-block-heading">Conclusion</h2> <p>The <strong><code><dialog></code></strong> HTML element is a valuable addition to the web developer’s toolkit. It simplifies the creation of modal dialogs while maintaining accessibility and user-friendliness. By following best practices and integrating it seamlessly into your web applications, you can enhance the overall user experience and make your interactions more intuitive and engaging.</p> <p>But what about you? Have you used the dialog element? IIf so, what did you like or didn’t like about it? Reach out on <a href="https://twitter.com/skil3e_manos">𝕏</a>.</p> </section> </article> <div class="flyntComponent componentSpacing " is="flynt-slider-posts"> <script type="application/json">{"options":{"a11y":{"nextSlideMessage":"N\u00e4chstes Element","prevSlideMessage":"Vorheriges Element","firstSlideMessage":"Das ist das erste Element","lastSlideMessage":"Das ist das letzte Element","paginationBulletMessage":"Gehe zum Element Nummer {{index}}"},"theme":"","postsHeading":"h3","autoplay":false,"autoplaySpeed":4000}}</script> <div class="centerMaxWidthContainer"> <div class="preContent preContent-small"> <div class="preContent-column preContent-column--full"><h2>Mehr Posts</h2> </div> </div> </div> <div class="container-rightEdge centerMaxWidthContainer"> <div class="slider swiper" data-slider> <div class="slider-wrapper swiper-wrapper"> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/if-there-was-astro-for-wordpress/" aria-label="If there was Astro for WordPress"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-640x416-c-default.png 640w" data-sizes="auto" alt="If there was Astro for WordPress"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">If there was Astro for WordPress</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/custom-chatbots-made-easy-how-to-build-your-own-chatgpt-agents/" aria-label="Custom chatbots made easy: How to build your own ChatGPT agents"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-640x416-c-default.png 640w" data-sizes="auto" alt="Custom chatbots made easy: How to build your own ChatGPT agents"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Custom chatbots made easy: How to build your own ChatGPT agents</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/enhancing-wordpress-archives-with-htmx-and-view-transitions/" aria-label="Enhancing WordPress Archives with HTMX and View Transitions"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-640x416-c-default.png 640w" data-sizes="auto" alt="Enhancing WordPress Archives with HTMX and View Transitions"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Enhancing WordPress Archives with HTMX and View Transitions</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/the-ups-and-downs-of-text-wrap-balance-and-a-polyfill/" aria-label="The ups and downs of text-wrap: balance and a polyfill"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-640x416-c-default.png 640w" data-sizes="auto" alt="The ups and downs of text-wrap: balance and a polyfill"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">The ups and downs of text-wrap: balance and a polyfill</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/introducing-our-figma-design-kit-for-flynt/" aria-label="Introducing our Figma Design Kit for Flynt"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-640x416-c-default.png 640w" data-sizes="auto" alt="Introducing our Figma Design Kit for Flynt"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Introducing our Figma Design Kit for Flynt</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/flynt-2-0-redefining-performance-and-experience/" aria-label="Flynt 2.0 – Redefining Performance and Experience"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-640x416-c-default.png 640w" data-sizes="auto" alt="Flynt 2.0 – Redefining Performance and Experience"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Flynt 2.0 – Redefining Performance and Experience</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/website-gehackt-was-tun/" aria-label="Website gehackt – was tun?"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-640x416-c-default.png 640w" data-sizes="auto" alt="Website gehackt – was tun?"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Website gehackt – was tun?</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> </div> </div> </div> <div class="centerMaxWidthContainer"> <div class="slider-footer slider-footer--mobileNavigationHidden "> <div class="slider-pagination" data-slider-pagination></div> <div class="slider-navigation"> <button type="button" data-slider-button="prev" class="slider-button slider-button--prev" aria-label="Previous Slide"></button> <button type="button" data-slider-button="next" class="slider-button slider-button--next" aria-label="Next Slide"></button> </div> </div> </div> </div> <div class="flyntComponent componentSpacing themeDark flyntComponent--hasBorder" is="flynt-hero-image-text"> <div class="container centerMaxWidthContainer"> <div class="box box--imageRight box--alignCenter box--hasImage-small"> <div class="box-inner box-inner--image"> <div class="media media--lottie"> <div class="lottie figure figure--small" style="--animation-scale: 2" data-lottie-path="https://bleech.de/wp-content/uploads/2022/01/data.json" data-lottie-loop="false" data-lottie-speed="1"></div> </div> </div> <div class="box-inner box-inner--content"> <h2>Wir helfen Unternehmen, den entscheidenden Schritt voraus zu sein – mit WordPress.</h2> <p><a class="button button--ghost" href="https://bleech.de/kontakt/">Kontakt</a></p> </div> </div> </div> <hr class="divider"></div> </main> <footer class="mainFooter"> <div class="flyntComponent themeDark" is="flynt-navigation-footer"> <script type="application/json">{"total":0}</script> <div class="container centerMaxWidthContainer"> <div class="footer-container footer-container--1"> <div class="footer-columns"> <div class="footer-col"> <div class="content"><p><strong>Bleech GmbH</strong><br /> Köpenicker Str. 10a<br /> 10997 Berlin</p> <p><a href="tel:+493044017947">+49 (0)30 4401 7947</a><br /> <a href="mailto:hello@bleech.de">hello@bleech.de</a></p> </div> </div> </div> <div class="navigation-wrapper"> <ul class="socials"> <li class="socials-item"> <a class="socials-link" href="https://www.youtube.com/@siegfried-deploy" target="_blank" rel="noopener noreferrer" aria-label="youtube"><svg width="35" height="25" viewBox="0 0 35 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.279 4.014A4.419 4.419 0 0031.194.882C28.455.122 17.5.122 17.5.122S6.544.121 3.805.852c-1.47.41-2.68 1.639-3.084 3.161C0 6.794 0 12.561 0 12.561s0 5.795.72 8.546a4.42 4.42 0 003.086 3.132C6.573 25 17.5 25 17.5 25s10.955 0 13.694-.732a4.419 4.419 0 003.085-3.131c.72-2.781.72-8.547.72-8.547s.03-5.796-.72-8.576zM14.012 17.888V7.234l9.11 5.327-9.11 5.327z" fill="currentColor"/></svg> </a> </li> <li class="socials-item"> <a class="socials-link" href="https://twitter.com/bleechberlin" target="_blank" rel="noopener noreferrer" aria-label="twitter"><svg width="448" height="512" viewBox="0 0 448 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M261.293 225.373L407.224 56H372.643L245.931 203.064L144.727 56H28L181.041 278.387L28 456H62.5829L196.394 300.696L303.273 456H420L261.285 225.373H261.293ZM213.927 280.346L198.421 258.201L75.0436 81.9936H128.161L227.728 224.199L243.234 246.344L372.659 431.189H319.542L213.927 280.354V280.346Z" fill="currentColor"/></svg> </a> </li> <li class="socials-item"> <a class="socials-link" href="https://www.linkedin.com/company/bleech" target="_blank" rel="noopener noreferrer" aria-label="linkedin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" fill="currentColor"/></svg> </a> </li> </ul> <nav class="navigation" aria-label="Footer"> <ul class="menu"> <li class="menu-show-jobs menu-item menu-item-type-custom menu-item-object-custom"> <a class="menu-link" href="https://bleech.de/team/#jobs" target="_self">Jobs</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/datenschutz/" target="_self">Datenschutz</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/agb/" target="_self">AGB</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/impressum/" target="_self">Impressum</a> </li> </ul> </nav> </div> </div> </div> </div> </footer> </div> <div class="wpFooter"> <!--googleoff: all--><div data-nosnippet><div id="BorlabsCookieBoxWrap"><div id="BorlabsCookieBox" class="BorlabsCookie" role="dialog" aria-labelledby="CookieBoxTextHeadline" aria-describedby="CookieBoxTextDescription" aria-modal="true" > <div class="bottom-center" style="display: none;"> <div class="_brlbs-bar-wrap"> <div class="_brlbs-bar _brlbs-bar-advanced"> <div class="cookie-box"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-sm-9"> <div class="row"> <div class="col-12"> <div class="_brlbs-flex-left"> <span role="heading" aria-level="3" class="_brlbs-h3" id="CookieBoxTextHeadline"> Datenschutzeinstellungen </span> </div> <p id="CookieBoxTextDescription"> <span class="_brlbs-paragraph _brlbs-text-description">Wir benötigen Ihre Zustimmung, bevor Sie unsere Website weiter besuchen können.</span> <span class="_brlbs-paragraph _brlbs-text-confirm-age">Wenn Sie unter 16 Jahre alt sind und Ihre Zustimmung zu freiwilligen Diensten geben möchten, müssen Sie Ihre Erziehungsberechtigten um Erlaubnis bitten.</span> <span class="_brlbs-paragraph _brlbs-text-technology">Wir verwenden Cookies und andere Technologien auf unserer Webseite. Einige von ihnen sind essenziell, während andere uns helfen, diese Webseite und Ihre Erfahrung zu verbessern.</span> <span class="_brlbs-paragraph _brlbs-text-personal-data">Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung.</span> <span class="_brlbs-paragraph _brlbs-text-more-information">Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer <a class="_brlbs-cursor" href="https://bleech.de/datenschutz/">Datenschutzerklärung</a>.</span> <span class="_brlbs-paragraph _brlbs-text-revoke">Sie können Ihre Auswahl jederzeit unter <a class="_brlbs-cursor" href="#" data-cookie-individual>Einstellungen</a> widerrufen oder anpassen.</span> </p> </div> </div> <fieldset> <legend class="sr-only">Datenschutzeinstellungen</legend> <ul > <li> <label class="_brlbs-checkbox"> Essenziell <input id="checkbox-essential" tabindex="0" type="checkbox" name="cookieGroup[]" value="essential" checked disabled data-borlabs-cookie-checkbox > <span class="_brlbs-checkbox-indicator"></span> </label> </li> <li> <label class="_brlbs-checkbox"> Externe Medien <input id="checkbox-external-media" tabindex="0" type="checkbox" name="cookieGroup[]" value="external-media" checked data-borlabs-cookie-checkbox > <span class="_brlbs-checkbox-indicator"></span> </label> </li> </ul> </fieldset> </div> <div class="col-12 col-sm-3"> <p class="_brlbs-accept"> <a href="#" tabindex="0" role="button" class="_brlbs-btn _brlbs-btn-accept-all _brlbs-cursor" data-cookie-accept-all > Alle akzeptieren </a> </p> <p class="_brlbs-accept"> <a href="#" tabindex="0" role="button" id="CookieBoxSaveButton" class="_brlbs-btn _brlbs-cursor" data-cookie-accept > Speichern </a> </p> <p class="_brlbs-manage-btn "> <a href="#" tabindex="0" role="button" class="_brlbs-cursor _brlbs-btn " data-cookie-individual > Individuelle Datenschutzeinstellungen </a> </p> <p class="_brlbs-legal"> <a href="#" tabindex="0" role="button" class="_brlbs-cursor" data-cookie-individual > Cookie-Details </a> <span class="_brlbs-separator"></span> <a tabindex="0" href="https://bleech.de/datenschutz/" > Datenschutzerklärung </a> <span class="_brlbs-separator"></span> <a tabindex="0" href="https://bleech.de/impressum/" > Impressum </a> </p> </div> </div> </div> </div> <div class="cookie-preference" aria-hidden="true" role="dialog" aria-describedby="CookiePrefDescription" aria-modal="true" > <div class="container not-visible"> <div class="row no-gutters"> <div class="col-12"> <div class="row no-gutters align-items-top"> <div class="col-12"> <div class="_brlbs-flex-center"> <span role="heading" aria-level="3" class="_brlbs-h3">Datenschutzeinstellungen</span> </div> <p id="CookiePrefDescription"> <span class="_brlbs-paragraph _brlbs-text-confirm-age">Wenn Sie unter 16 Jahre alt sind und Ihre Zustimmung zu freiwilligen Diensten geben möchten, müssen Sie Ihre Erziehungsberechtigten um Erlaubnis bitten.</span> <span class="_brlbs-paragraph _brlbs-text-technology">Wir verwenden Cookies und andere Technologien auf unserer Webseite. Einige von ihnen sind essenziell, während andere uns helfen, diese Webseite und Ihre Erfahrung zu verbessern.</span> <span class="_brlbs-paragraph _brlbs-text-personal-data">Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung.</span> <span class="_brlbs-paragraph _brlbs-text-more-information">Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer <a class="_brlbs-cursor" href="https://bleech.de/datenschutz/">Datenschutzerklärung</a>.</span> <span class="_brlbs-paragraph _brlbs-text-description">Hier finden Sie eine Übersicht über alle verwendeten Cookies. Sie können Ihre Einwilligung zu ganzen Kategorien geben oder sich weitere Informationen anzeigen lassen und so nur bestimmte Cookies auswählen.</span> </p> <div class="row no-gutters align-items-center"> <div class="col-12 col-sm-7"> <p class="_brlbs-accept"> <a href="#" class="_brlbs-btn _brlbs-btn-accept-all _brlbs-cursor" tabindex="0" role="button" data-cookie-accept-all > Alle akzeptieren </a> <a href="#" id="CookiePrefSave" tabindex="0" role="button" class="_brlbs-btn _brlbs-cursor" data-cookie-accept > Speichern </a> </p> </div> <div class="col-12 col-sm-5"> <p class="_brlbs-refuse"> <a href="#" class="_brlbs-cursor" tabindex="0" role="button" data-cookie-back > Zurück </a> </p> </div> </div> </div> </div> <div data-cookie-accordion> <fieldset> <legend class="sr-only">Datenschutzeinstellungen</legend> <div class="bcac-item"> <div class="d-flex flex-row"> <label class="w-75"> <span role="heading" aria-level="4" class="_brlbs-h4">Essenziell (1)</span> </label> <div class="w-25 text-right"> </div> </div> <div class="d-block"> <p>Essenzielle Cookies ermöglichen grundlegende Funktionen und sind für die einwandfreie Funktion der Website erforderlich.</p> <p class="text-center"> <a href="#" class="_brlbs-cursor d-block" tabindex="0" role="button" data-cookie-accordion-target="essential" > <span data-cookie-accordion-status="show"> Cookie-Informationen anzeigen </span> <span data-cookie-accordion-status="hide" class="borlabs-hide"> Cookie-Informationen ausblenden </span> </a> </p> </div> <div class="borlabs-hide" data-cookie-accordion-parent="essential" > <table> <tr> <th scope="row">Name</th> <td> <label> Borlabs Cookie </label> </td> </tr> <tr> <th scope="row">Anbieter</th> <td>Eigentümer dieser Website<span>, </span><a href="https://bleech.de/impressum/">Impressum</a></td> </tr> <tr> <th scope="row">Zweck</th> <td>Speichert die Einstellungen der Besucher, die in der Cookie Box von Borlabs Cookie ausgewählt wurden.</td> </tr> <tr> <th scope="row">Cookie Name</th> <td>borlabs-cookie</td> </tr> <tr> <th scope="row">Cookie Laufzeit</th> <td>1 Jahr</td> </tr> </table> </div> </div> <div class="bcac-item"> <div class="d-flex flex-row"> <label class="w-75"> <span role="heading" aria-level="4" class="_brlbs-h4">Externe Medien (1)</span> </label> <div class="w-25 text-right"> <label class="_brlbs-btn-switch"> <span class="sr-only">Externe Medien</span> <input tabindex="0" id="borlabs-cookie-group-external-media" type="checkbox" name="cookieGroup[]" value="external-media" checked data-borlabs-cookie-switch /> <span class="_brlbs-slider"></span> <span class="_brlbs-btn-switch-status" data-active="An" data-inactive="Aus"> </span> </label> </div> </div> <div class="d-block"> <p>Inhalte von Videoplattformen und Social-Media-Plattformen werden standardmäßig blockiert. Wenn Cookies von externen Medien akzeptiert werden, bedarf der Zugriff auf diese Inhalte keiner manuellen Einwilligung mehr.</p> <p class="text-center"> <a href="#" class="_brlbs-cursor d-block" tabindex="0" role="button" data-cookie-accordion-target="external-media" > <span data-cookie-accordion-status="show"> Cookie-Informationen anzeigen </span> <span data-cookie-accordion-status="hide" class="borlabs-hide"> Cookie-Informationen ausblenden </span> </a> </p> </div> <div class="borlabs-hide" data-cookie-accordion-parent="external-media" > <table> <tr> <th scope="row">Akzeptieren</th> <td> <label class="_brlbs-btn-switch _brlbs-btn-switch--textRight"> <span class="sr-only">YouTube</span> <input id="borlabs-cookie-youtube" tabindex="0" type="checkbox" data-cookie-group="external-media" name="cookies[external-media][]" value="youtube" checked data-borlabs-cookie-switch /> <span class="_brlbs-slider"></span> <span class="_brlbs-btn-switch-status" data-active="An" data-inactive="Aus" aria-hidden="true"> </span> </label> </td> </tr> <tr> <th scope="row">Name</th> <td> <label> YouTube </label> </td> </tr> <tr> <th scope="row">Anbieter</th> <td>Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland</td> </tr> <tr> <th scope="row">Zweck</th> <td>Wird verwendet, um YouTube-Inhalte zu entsperren.</td> </tr> <tr> <th scope="row">Datenschutzerklärung</th> <td class="_brlbs-pp-url"> <a href="https://policies.google.com/privacy" target="_blank" rel="nofollow noopener noreferrer" > https://policies.google.com/privacy </a> </td> </tr> <tr> <th scope="row">Host(s)</th> <td>google.com</td> </tr> <tr> <th scope="row">Cookie Name</th> <td>NID</td> </tr> <tr> <th scope="row">Cookie Laufzeit</th> <td>6 Monate</td> </tr> </table> </div> </div> </fieldset> </div> <div class="d-flex justify-content-between"> <p class="_brlbs-branding flex-fill"> <a href="https://de.borlabs.io/borlabs-cookie/" target="_blank" rel="nofollow noopener noreferrer" > <img src="https://bleech.de/wp-content/plugins/borlabs-cookie/assets/images/borlabs-cookie-icon-black.svg" alt="Borlabs Cookie" width="16" height="16"> powered by Borlabs Cookie </a> </p> <p class="_brlbs-legal flex-fill"> <a href="https://bleech.de/datenschutz/"> Datenschutzerklärung </a> <span class="_brlbs-separator"></span> <a href="https://bleech.de/impressum/"> Impressum </a> </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div></div><!--googleon: all--><script id="wpcf7-redirect-script-js-extra"> var wpcf7_redirect_forms = {"13401":{"page_id":"13278","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"13400":{"page_id":"13292","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"13295":{"page_id":"13278","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"13277":{"page_id":"13292","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"8129":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"8126":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"5624":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"5613":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"2044":{"page_id":"13531","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-nachricht\/"},"944":{"page_id":"13532","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-nachricht\/"}}; </script> <script src="https://bleech.de/wp-content/plugins/cf7-redirection/js/wpcf7-redirect-script.js" id="wpcf7-redirect-script-js"></script> <script id="mkaz-code-syntax-prism-js-js-extra"> var prism_settings = {"pluginUrl":"https:\/\/bleech.de\/wp-content\/plugins\/code-syntax-block\/"}; </script> <script src="https://bleech.de/wp-content/plugins/code-syntax-block/assets/prism/prism.js?ver=1715763791" id="mkaz-code-syntax-prism-js-js"></script> <script id="flynt-assets-js-extra"> var FlyntData = {"templateDirectoryUri":"https:\/\/bleech.de\/wp-content\/themes\/bleech-website-2021","componentsWithScript":{"AccordionDefault":"AccordionDefault","BlockCountUp":"BlockCountUp","BlockCta":"BlockCta","BlockDocs":"BlockDocs","BlockGallery":"BlockGallery","BlockLottieTextVertical":"BlockLottieTextVertical","BlockNotFound":"BlockNotFound","BlockPodcastsTeaser":"BlockPodcastsTeaser","BlockVideoLocal":"BlockVideoLocal","BlockVideoOembed":"BlockVideoOembed","FormContactForm7":"FormContactForm7","GridPostsArchive":"GridPostsArchive","GridServices":"GridServices","HeroCta":"HeroCta","HeroImageText":"HeroImageText","ListComponents":"ListComponents","ListPodcasts":"ListPodcasts","NavigationBurger":"NavigationBurger","NavigationFooter":"NavigationFooter","SliderImages":"SliderImages","SliderPosts":"SliderPosts","SliderTestimonials":"SliderTestimonials"},"currentLanguage":"de"}; </script> <script src="https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/main.72c73c1d5ccd12cac405.js?ver=6.7.1" id="flynt-assets-js" defer></script> <script id="borlabs-cookie-js-extra"> var borlabsCookieConfig = {"ajaxURL":"https:\/\/bleech.de\/wp-admin\/admin-ajax.php","language":"de","animation":"","animationDelay":"","animationIn":"_brlbs-fadeInUp","animationOut":"_brlbs-fadeOutDown","blockContent":"1","boxLayout":"bar","boxLayoutAdvanced":"1","automaticCookieDomainAndPath":"","cookieDomain":"bleech.de","cookiePath":"\/","cookieSameSite":"Lax","cookieSecure":"1","cookieLifetime":"182","cookieLifetimeEssentialOnly":"182","crossDomainCookie":[],"cookieBeforeConsent":"","cookiesForBots":"","cookieVersion":"1","hideCookieBoxOnPages":[],"respectDoNotTrack":"","reloadAfterConsent":"","reloadAfterOptOut":"1","showCookieBox":"","cookieBoxIntegration":"html","ignorePreSelectStatus":"1","cookies":{"essential":["borlabs-cookie"],"external-media":["youtube"]}}; var borlabsCookieCookies = {"essential":{"borlabs-cookie":{"cookieNameList":{"borlabs-cookie":"borlabs-cookie"},"settings":{"prioritize":"0","asyncOptOutCode":"0"},"optInJS":"PHNjcmlwdD53aW5kb3cuQm9ybGFic0Nvb2tpZS51bmJsb2NrU2NyaXB0QmxvY2tlcklkKCJmbHludC1hc3NldHMiKTs8L3NjcmlwdD4=","optOutJS":""}},"external-media":{"youtube":{"cookieNameList":{"NID":"NID"},"settings":{"blockCookiesBeforeConsent":"0","prioritize":"0"},"optInJS":"PHNjcmlwdD5pZih0eXBlb2Ygd2luZG93LkJvcmxhYnNDb29raWUgPT09ICJvYmplY3QiKSB7IHdpbmRvdy5Cb3JsYWJzQ29va2llLnVuYmxvY2tDb250ZW50SWQoInlvdXR1YmUiKTsgfTwvc2NyaXB0Pg==","optOutJS":""}}}; </script> <script src="https://bleech.de/wp-content/plugins/borlabs-cookie/assets/javascript/borlabs-cookie.min.js?ver=2.3" id="borlabs-cookie-js"></script> <script id="borlabs-cookie-js-after"> document.addEventListener("DOMContentLoaded", function (e) { var borlabsCookieContentBlocker = {"facebook": {"id": "facebook","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { if(typeof FB === "object") { FB.XFBML.parse(el.parentElement); } },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"googlemaps": {"id": "googlemaps","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"instagram": {"id": "instagram","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { if (typeof instgrm === "object") { instgrm.Embeds.process(); } },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"openstreetmap": {"id": "openstreetmap","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"twitter": {"id": "twitter","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"unblockAll":"0","executeGlobalCodeBeforeUnblocking":"0"}},"vimeo": {"id": "vimeo","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"unblockAll":"0","saveThumbnails":"0","autoplay":"0","videoWrapper":"0","executeGlobalCodeBeforeUnblocking":"0"}},"youtube": {"id": "youtube","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"unblockAll":"0","saveThumbnails":"0","thumbnailQuality":"maxresdefault","changeURLToNoCookie":"1","autoplay":"0","videoWrapper":"0","executeGlobalCodeBeforeUnblocking":"0"}}}; var BorlabsCookieInitCheck = function () { if (typeof window.BorlabsCookie === "object" && typeof window.jQuery === "function") { if (typeof borlabsCookiePrioritized !== "object") { borlabsCookiePrioritized = { optInJS: {} }; } window.BorlabsCookie.init(borlabsCookieConfig, borlabsCookieCookies, borlabsCookieContentBlocker, borlabsCookiePrioritized.optInJS); } else { window.setTimeout(BorlabsCookieInitCheck, 50); } }; BorlabsCookieInitCheck();}); </script> </div> </body> </html>