Modal Snippets
The modal snippet allows you to hide content off-screen in a modal dialog window that is called by pressing an accompanying button. The modal window is brought on top of the entire page and navigation with a dark background effect. After viewing the content the user can close the modal using another button with custom text.
Snippet Options
LAUNCH-BUTTON-COLOR
Changes the color of the button that launches the modal, WKU Red button or Gray button.
- RED
- GRAY
- RED-OUTLINE
LAUNCH-BUTTON-SIZE
Controls the size of the button that launches the modal.
- SMALL
- MEDIUM
- LARGE
LAUNCH-BUTTON-WIDER
Makes the launch button fill the width of the content it is in. Works great with columns, cards, or other smaller spaces.
- YES
- NO
FOOTER-BUTTON-COLOR
Changes the color of the button in the footer of the modal that closes the dialog window. Since it is a default button in the modal WKU Red button or Gray button are the only color options for this button.
- RED
- GRAY
MODAL-SIZE
Controls the width of the modal window.
- SMALL
- MEDIUM
- LARGE
Snippet Columns
Launch Button Text
The text of the button that launches the modal.
Text Only, additional content will be removed.
Modal Title
The red background title at the top of the modal.
Text Only, additional content will be removed.
Modal Footer Button Text
The text of the button in the footer of the modal that closes it.
Text Only, additional content will be removed.
Modal Content
The body content of the modal.
WYSIWYG content, nested snippets, components, and assets allowed.
Centering the Snippet
To center this snippet's content on a page right-click the table, select table properties, and change the alignment to center.
Examples
Example 1
A modal to indicate a short message. This example uses the small size modal and the WKU red button.
| Modal Snippet | |||
|---|---|---|---|
| Options | |||
| LAUNCH-BUTTON-COLOR | RED | ||
| LAUNCH-BUTTON-SIZE | MEDIUM | ||
| LAUNCH-BUTTON-WIDER | NO | ||
| FOOTER-BUTTON-COLOR | RED | ||
| MODAL-SIZE | SMALL | ||
| Modal Content | |||
| Launch Button Text | Modal Title | Modal Footer Button Text | Modal Content |
| Open Example 1 | Short Message | OK |
This is a short message. |
Example 2
A modal with more information. This example uses the medium size modal and the grey button. Modals can contain more text than a simple message. Use these modals when you need to include addition content off the page.
| Modal Snippet | |||
|---|---|---|---|
| Options | |||
| LAUNCH-BUTTON-COLOR | GRAY | ||
| LAUNCH-BUTTON-SIZE | MEDIUM | ||
| LAUNCH-BUTTON-WIDER | NO | ||
| FOOTER-BUTTON-COLOR | GRAY | ||
| MODAL-SIZE | SMALL | ||
| Modal Content | |||
| Launch Button Text | Modal Title | Modal Footer Button Text | Modal Content |
| Get the Details | Details | Close |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl. Suscipit tellus mauris a diam maecenas sed. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Mattis pellentesque id nibh tortor id aliquet lectus proin. Proin sed libero enim sed faucibus turpis in. Ultricies mi quis hendrerit dolor. Aliquam eleifend mi in nulla. Donec enim diam vulputate ut pharetra sit amet. Purus in mollis nunc sed. Nulla at volutpat diam ut venenatis tellus in metus. At imperdiet dui accumsan sit amet nulla facilisi. Hendrerit dolor magna eget est. Metus vulputate eu scelerisque felis. Egestas erat imperdiet sed euismod nisi porta. Eget mi proin sed libero. Mattis enim ut tellus elementum sagittis. Turpis egestas sed tempus urna et pharetra. Vitae aliquet nec ullamcorper sit amet risus. Bibendum est ultricies integer quis auctor elit sed. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Vestibulum sed arcu non odio. Neque sodales ut etiam sit amet. |
Example 3
Modals can contain many things including other snippets and assets. In this example we use a small button to launch a form asset placed in the Modal Content to create a simple off page contact form.
| Modal Snippet | |||
|---|---|---|---|
| Options | |||
| LAUNCH-BUTTON-COLOR | RED | ||
| LAUNCH-BUTTON-SIZE | SMALL | ||
| LAUNCH-BUTTON-WIDER | NO | ||
| FOOTER-BUTTON-COLOR | GRAY | ||
| MODAL-SIZE | SMALL | ||
| Modal Content | |||
| Launch Button Text | Modal Title | Modal Footer Button Text | Modal Content |
| Contact Us | Contact Us | Close | |
Example 4
The Large modal size can be used for almost any content you want to place in it. This includes other snippets, images, assets, and more. This example combines the 2 column snippet, images, text, and a form asset.
| Modal Snippet | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Options | |||||||||
| LAUNCH-BUTTON-COLOR | RED-OUTLINE | ||||||||
| LAUNCH-BUTTON-SIZE | LARGE | ||||||||
| LAUNCH-BUTTON-WIDER | NO | ||||||||
| FOOTER-BUTTON-COLOR | GRAY | ||||||||
| MODAL-SIZE | SMALL | ||||||||
| Modal Content | |||||||||
| Launch Button Text | Modal Title | Modal Footer Button Text | Modal Content | ||||||
| Contact Us | Contact Us | Close |
|
||||||
Example 5
This example shows a centered button using the steps outlined under "Centering the Snippet".
| Modal Snippet | |||
|---|---|---|---|
| Options | |||
| LAUNCH-BUTTON-COLOR | RED | ||
| LAUNCH-BUTTON-SIZE | MEDIUM | ||
| LAUNCH-BUTTON-WIDER | NO | ||
| FOOTER-BUTTON-COLOR | GRAY | ||
| MODAL-SIZE | SMALL | ||
| Modal Content | |||
| Launch Button Text | Modal Title | Modal Footer Button Text | Modal Content |
| Centered Modal Button | Centered Modal Button Example | Close | Example Modal! The button that launched this was centered. |
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.