Modal Overlay component

Create This Feature Sample PageModal Overlay components generate pop-ups on a webpage. These overlays are generally used to get people to subscribe to email newsletters, but you may find other reasons for using them.

The Component
Component Template

The Basics of a Modal Overlay Component

Below are the fields to complete, along with tips for completing them. To see where each of these fields render on the published page, please click the Component Template tab above.
1. Name: enter a name for your component.
2. Schema: select Modal Overlay
3. Modal introduction text: this is a rich-text field where you can enter some intro text for your overlay. Rich-text fields allow bulleted lists, images, links, and some text formatting.
4. Modal code: this field accepts HTML or Javascript code. This is where you'll put the code snippets you get from other sources, such as GovDelivery.
5. Modal bottom text: this is a rich-text field where you can enter some intro text for your overlay. Rich-text fields allow bulleted lists, images, links, and some text formatting. .
6. Modal name: give your overlay a unique name using only alpha-numeric characters and hyphens.
7. Width of the modal: select small, medium, or large to define the width of your overlay.
8. Automatically display when page loads?: select true to have your overlay automatically pop-up on page load, or false if you don't want it to automatically appear.
9. Button text: if you selected false in the last step, a button will appear on the page that triggers the overlay. Enter the text to display inside that button here.
10. Style: select the color scheme for your overlay. The options are white, branded (the MN state blue), dark gray, or light gray.
11. Expiration: if you want your pop-up to expire after a certain period of time, enter the number of days here. If you don't wish for it to expire, enter 0.
Component Templates

The Modal Overlay component has just one component template, which is also called Modal Overlay. Below is an example of how it renders:
- The Modal Code (#4) in this example is controlling all of the content shown. If desired, additional content could have been added at the top or bottom of the pop-up, using the Modal Introduction Text (#3) or the Modal Bottom Text (#5) fields.
- The Width of the Modal (#7) was set to "small" for this example.
- Automatically display when page loads (#8) was set to true.
- For Style (#10), "white" was selected, which generated a white background for the pop-up.