Facebook Pixel Modal Snippets | Western Kentucky University Skip to main content

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.

Instructions

 

 

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

First and Last

 

 

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

Two Column Responsive Snippet

ALIGN-CENTER YES

Placeholder Image

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.

First and Last

 

 

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.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 11/6/20