The dialog widget provides a way to display content in an in-page popup.

Dialog overview

The dialog widget structure

  • dialog: the dialog widget, specified as:
    • element with data-widget="dialog"
  • close button: the close button, specified as:
    • elements with data-role="close"
    • auto-generated

Options for the dialog widget

  • data-overlay: whether to show the dialog in an overlay (true or false, false by default)

Simple dialog

Toggle dialog
Some dummy image 1
Some dummy image 1

Toggle dialog
Some dummy image 2
Some dummy image 2

Standard Popup Image

© 2016 EPFL
© 2016 EPFL
© 2016 EPFL