Skip to content

Dialog

This is a dialog box that opens up once a button is clicked. It is useful for showing secondary information that is not critical to show in the main content of the page itself.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Specifications
    1. Properties
    2. Styling
      1. Modifiers
      2. Custom Properties
  4. Changelog
  5. Related
    1. Contains
  6. Examples

Anatomy

  1. Content
  2. Close Button

Usage Guidelines

This is a dialog box that opens up once a button is clicked. It is useful for showing secondary information that is not critical to show in the main content of the page itself. It is primarily used to show faculty data as part of the Faculty Listing pattern, but can show any type of content.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
namestring must be unique to other dialogs on the same page. Yes-
contentstring Inner HTML markup (raw HTML or other template includes) Yes-
focusstring Selector of element to initially focus. Make sure it has a tabindex set. By default it will focus on the close button No-
post_liststring ID of an element on the page that has a list of items with data-id attributes No-
list_typestring type of list it is No-
idstring Used to optionally add functionality to the dialog. No-

Styling

Modifiers

NameClassDescription
Active.tux-c-dialog--activeAs the dialog box is hidden by default, this modifier displays the dialog box.
Video.tux-c-dialog--videoThis makes the diloag box have an automatic height based on the video located inside of it.

Custom Properties

NameDefaultResetsDescription
--tux-comp-dialog--close-bg-color#fffNo-
--tux-comp-dialog--close-text-colorinitialNo-
--tux-comp-dialog--close-hover-bg-color#d90123No-
--tux-comp-dialog--close-hover-text-color#fffNo-
--tux-comp-dialog--nav-bg-color#222No-
--tux-comp-dialog--nav-text-color#fffNo-

Changelog

6.12.2 (2024-06-26)

  • fix: update icon color for prev/next buttons to match text (#600) (1f9e1c8)

6.5.0 (2023-12-13)

  • fix: skip hidden items when getting next in list (f14b182)

1.28.4 (2022-03-10)

  • fix: support vimeo for pausing video on close (#213) (84830e8)

1.18.0 (2021-04-01)

1.7.0 (2020-07-13)

  • fix: support custom background color for form (b8970c2)

1.4.2 (2020-06-01)

  • fix: properly layer chat popup behind modals (eed5bf7)

1.3.0 (2020-05-08)

  • fix: add add_attributes (c0db87e)
  • fix: apply default hover and focus style for close (4dd1bc2)

1.0.0

  • dialog added

Contains

Other core components embedded within this template.

Examples

Default 

<x-button data-dialog="example">Open Dialog</x-button>

{{ include( 'components/dialog.twig', {
	name: "example",
	content: "<h2>Inner Content</h2><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>"
} ) }}