Daniel Hundt - Erfahrung Technologien im Frontend

zurück zur Technologie-Übersicht

Fokusierung und Nutzerführung durch Ausblenden des Hintergrunds

Inhalt

normale Ansicht
So sieht der normale Dialog aus
© KMW Reisen GmbH
Fokus auf Feedback Formular
Der Hintergrund wird abgedunkelt und entsättigt um den Fokus auf das Feedback Formular zu legen. Scrollen bleibt weiterhin möglich.
© KMW Reisen GmbH
Fokus auf Modal
Der Hintergrund wird zusätzlich auch via Weichzeichner "verpixelt" um den Fokus ganz auf das Modal zu legen. Der Hintergrund ist nicht mehr scrollbar.
© KMW Reisen GmbH

Die Herausforderung war vor allem, die DOM-Elemente für "ausgeblendeter Inhalt" und "Modal" sauber zu trennen.
Im Fall des Feedback-Formulars sollte der Hintergrund weiterhin erkennbar und auch scrollbar bleiben.
Für überlagernde Modal-Fenster wird der Hintergrund unscharf gezeichnet und die Scrollbalken ausgeblendet.