Modal

Introduction

The modal block allows you to hide content on your page and display it when a user clicks a link or a button. You can also set it to autoplay if you have an alert that the user needs to give attention to before reading the page.

Styles

Default

White background with a box shadow.

Border Bottom

UW Red underline on the bottom of the modal.

Options

Position

• Center (default) – Displays a modal in the center of the screen that takes up the majority of the screen width.
• Left – Displays a modal on the left third of the display. On a mobile device, it will take up the full width of the screen.
• Right – Displays a modal on the right third of the display. On a mobile device, it will take up the full width of the screen.

Open Button (text)

Specify the id(s) or url(s) of the button(s) that will open the modal. If there are multiple buttons, they can all use the same url, or you can specify multiple ids/urls by separating them with a comma and a space.

Autoplay (on/off)

Enable to display modal on page automatically without the user needing to push a button. Keep in mind, this can lead to a poor user experience. You should only use this feature if you have critical information on the page the user needs to give attention to.

• Autoplay Delay
  Specify the number of seconds before the modal appears on the page. Default is 0 (will appear immediately on page load)

Enhance Modal Depth (on/off)

Blurs the background when the modal is open to emphasize modal content. Disable background blur to allow the user to read content behind the modal with a dim black overlay.

Center Modal – with border bottom style

This modal uses the default positioning, so it is positioned in the center of the screen and takes up a majority of it. The height of the modal will be dependent on the height of the content inside. If you have too much content to fit on the screen, a scrollbar will appear and the user will be able to scroll within the modal.

Enhance Modal Depth is enabled, so the background is blurred.

To close the modal, click the X or any other location outside the modal, or press the escape key.

Left Modal

This modal is set to autoplay immediately. You can also set a delay. Keep in mind–this can annoy users, so use it wisely.

This modal uses the left positioning, so it is positioned on the left side of the display and will take up the entire height of the screen. If there’s too much content, a scrollbar will appear and the user will be able to scroll within the modal.

Enhance Modal Depth is disabled, so the background is not blurred.

To close the modal, click the X or any other location outside the modal, or press the escape key.

Right Modal – custom color/background

This modal has an “open button” value of “#right”

This modal uses the left positioning, so it is positioned on the right side of the display and will take up the entire height of the screen. If there’s too much content, a scrollbar will appear and the user will be able to scroll within the modal.

It also has a custom background (black) and text color (light red). You’ll notice the color of the “X” button matches the text color set. Please use these colors tastefully—this example is only for emphasis and is not best practice.

Enhance Modal Depth is enabled, so the background is blurred.

To close the modal, click the X or any other location outside the modal, or press the escape key.