Infobox

Eine Infobox ist ein Kasten außerhalb des Fließtextes, der zusätzliche Informationen enthält.

Im Webdesign wird er häufig als Disclosure Widget zum Aufklappen oder als Popup realisiert. Während dies früher mit CSS und JavaScript umständlich selbst gebaut werden musste, zeigt diese Artikel-Reihe, wie Sie zeitgemäße Popover und Dialogfenster erstellen.

• Tooltips mit title
  • title
  • abbr
  • dfn
  • Tooltips, Touch und Zugänglichkeit
   
• 

  Tooltips mit Popover
  • Popover API
  • Anchor Position

  Neu! Revolutionär!
  
  Popups ohne Programmieren!

   
• 

  modale Dialogfenster
  • dialog-Element
  • modal vs nichtmodal
  •  :backdrop

  Das UI-Element für Web-Apps

   
• aside-Element

  Zusatzinformationen haben ihren Platz!

  Im aside-Element können sie unterhalb des Inhalts oder am Rand dargestellt werden.

   
• 

  Akkordeon mit <details>
  • details und summary
  • Akkordeon
  • Registerkarten (Tab Panels)

  Besonders interessant für FAQs, um Inhalte übersichtlich zu präsentieren.

   
• Bilder im Internet
  • Bildwechsler -
    Lightbox mit dialog

  
   

Siehe auch

Früher konnten solche UI-Elemente nur mit JavaScript realisiert werden. Hier sind einige Artikel, die sich damit beschäftigen, wie man so etwas selbst programmiert:

• Inline-Popup

  (Dieses Beispiel zeigt, wie man so etwas nur mit JavaScript realisiert, nur ein proof of concept)

   
• Kontextmenü
  • menu
  • contextmenu-Event
   

• JavaScript/Tutorials/Eigene modale Dialogfenster
• JavaScript/Tutorials/Zusammenfassung für längere Artikel

Quellen

• Nielsen Group: Please-Don’t-Go Popups & Get-Back-to-Me Tabs von Kate Meyer und Kim Flaherty (May 15, 2016)