Infobox

Aus SELFHTML-Wiki
(Weitergeleitet von Popunder)
Wechseln zu: Navigation, Suche
Popover-icon.svg
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
    Landscape.svg

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

Quellen