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

Dialogue-Link with title and content as text

Dialogue-Link with content-selector

Dialogue for 2 secounds

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)


Dialogue with title and content as text

Dialogue with hidden title and content as text

Update Dialogue title

Update Dialogue title (hidden)

Dialogue with title and content as node

Close Dialogue with alert after animation

Alert when opened

Hello world for 2 seconds

Dialogue Variant light & belowcontent

Dialogue open enlarge and close

Page examples