Hi! > > > Ein modalen Dialog wäre besser kein `div`, sondern ein [`dialog`-Element](http://w3c.github.io/html/interactive-elements.html#the-dialog-element). Aber welcher Browser unterstützt das wie definiert? Laut [https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog](https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog) bisher nur Chrome. > Bei Bootcrap wird doch die visuelle Darstellung über Klassen geregelt. Du solltest im Markup `div` in `dialog` ändern können, ohne dass sich die visuelle Darstellung ändert. Das denke ich nicht.... In Browsern die dialog unterstützen bringt das Element eigene Styles mit sich. Die beißen sich wahrscheinlich mit Bootstrap: [http://w3c.github.io/html/rendering.html#non-replaced-elements-flow-content](http://w3c.github.io/html/rendering.html#non-replaced-elements-flow-content) > Eventuell noch `dialog { display: block }`{: .language-css} ins Stylesheet. Das leuchtet mir nicht ein. Ohne "open" Attribut sollte <dialog> standardmäßig versteckt sein. Man sollte besser "open" setzen, um es zu zeigen. Dazu würde ich die verlinkten Styles benutzen und wenn nötig anpassen: ~~~css dialog:not([open]) { display: none; } dialog { display: block; usw. } ~~~ <dialog> ist eine coole Erfindung. Bloß glaube ich nicht dass es sich mit Bootstrap Modals vereinbaren lässt. Dazu müsste Bootstrap die Browserstyles passend überschreiben. Außerdem setzt Bootstrap tabindex ein damit das Element fokussierbar ist. Nur: "The tabindex attribute must not be specified on dialog elements." Man sollte vorsichtig damit sein noch nicht unterstützte Elemente statt <div>s zu verwenden. Wenn die Browser sie irgendwann unterstützen, bekommen sie plötzlich eine neue Bedeutung und Styles hinzu. > Wenngleich die Frameworks in Sachen Barrierefreiheit schon besser werden. Nur am Rande, die Modals in Bootstrap sind barrierefrei soweit ich weiß. Tabindex Fokus, ARIA Rolle, ARIA Label usw. Mit <dialog> wird das zum Glück bald einfacher aber bis dahin ist das die beste Lösung. Pascal

Hi! > > > Ein modalen Dialog wäre besser kein `div`, sondern ein [`dialog`-Element](http://w3c.github.io/html/interactive-elements.html#the-dialog-element). Aber welcher Browser unterstützt das wie definiert? Laut [https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog](https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog) bisher nur Chrome. > Bei Bootcrap wird doch die visuelle Darstellung über Klassen geregelt. Du solltest im Markup `div` in `dialog` ändern können, ohne dass sich die visuelle Darstellung ändert. Das denke ich nicht.... In Browsern die dialog unterstützen bringt das Element eigene Styles mit sich. Die beißen sich wahrscheinlich mit Bootstrap: [http://w3c.github.io/html/rendering.html#non-replaced-elements-flow-content](http://w3c.github.io/html/rendering.html#non-replaced-elements-flow-content) > Eventuell noch `dialog { display: block }`{: .language-css} ins Stylesheet. Das leuchtet mir nicht ein. Ohne "open" Attribut sollte <dialog> standardmäßig versteckt sein. Man sollte besser "open" setzen, um es zu zeigen. Dazu würde ich die verlinkten Styles benutzen und wenn nötig anpassen: dialog:not([open]) { display: none; } dialog { display: block; usw. } <dialog> ist eine coole Erfindung. Bloß glaube ich nicht dass es sich mit Bootstrap Modals vereinbaren lässt. Dazu müsste Bootstrap die Browserstyles passend überschreiben. Außerdem setzt Bootstrap tabindex ein damit das Element fokussierbar ist. Nur: "The tabindex attribute must not be specified on dialog elements." Man sollte vorsichtig damit sein noch nicht unterstützte Elemente statt <div>s zu verwenden. Wenn die Browser sie irgendwann unterstützen, bekommen sie plötzlich eine neue Bedeutung und Styles hinzu. > Wenngleich die Frameworks in Sachen Barrierefreiheit schon besser werden. Nur am Rande, die Modals in Bootstrap sind barrierefrei soweit ich weiß. Tabindex Fokus, ARIA Rolle, ARIA Label usw. Mit <dialog> wird das zum Glück bald einfacher aber bis dahin ist das die beste Lösung. Pascal