Styleguide Navigation

Dialogue

  • Status unknown
  • 2017-03-23 Added
  • 2017-05-18 Add a loader and optimize the close animation (markup, style, js) [jr]
  • 2017-06-20 Add dialogue variant 'light' and 'belowcontent' (markup, style, js) [jr]
  • 2017-07-10 Add keepfocus option to dialogue (js) [jr]
  • 2017-07-31 Dialogue title get a id 'dialogue-title' and the buttons get the attribute 'aria-describedby= "dialogue-title"' (markup) [jr]
  • 2018-02-15 PSS20-1176 - Change dialogue price tag, insert and align info icon (markup, style) [jr]
  • 2024-09-19 Add role and aria-live to dialogue--inner, refs. EDRE-589 (markup, style) [jr]
  • 2025-03-07 Change ibe_dialogue--loader--content to h2 (markup) [jr]
  • 2025-03-07 Add role='dialog' to the dialogue (markup) [jr]
  • 2025-03-28 Correct spelling from ibe_dialogue--title-hiden to ibe_dialogue--title-hidden (markup) [jr]
  • 2025-07-28 ALLYREVIEW2025 - Remove alt from loader image, refs. EDRE-732 (markup) [jr]

Dialogue (default)

Dialogue (variant: light)

Open Dialogue via Link

Voluptates ab enim accusantium repellendus occaecati quis nulla cumque. consequatur quo velit ut laborum alias error. vel deserunt rerum laboriosam sit ea iusto rerum iure id quidem praesentium. numquam iure perferendis iusto. incidunt excepturi cumque error ab alias autem accusantium praesentium sed. voluptas iusto totam et. rem quia eos aut fugit ducimus

Close current Dialogue Enlarge and close current Dialogue

JavaScript API

ew.ui.dialogue.show(title, content [, options])

open a Dialogue

  • title (String)
  • content (String (HTML-String) / DomNode / jQueryNode / null)
  • options (Object) optional attributes

    Attribute Type Description
    variant String variant of the dialogue (if more than one variant use a whitespace as a divider e.g. "variantA variantB")
    keepfocus Boolean (false) If focus should stay inside of dialogue (if user-input is necessary)
    focusInside Boolean (true) If the focusable elements inside of a dialogue should be focused on open.


ew.ui.dialogue.close()

close a Dialogue


ew.ui.dialogue.enlarge()

enlarge a Dialogue


ew.ui.dialogue.setTitle(title)

set a new Dialogue-Title

  • title (String)


Page examples