Modal Popup

The Modal Popup Module is used to edit and control a modal element that will "pop up" when someone visits your site. We recommend using this feature for long running items that you want call attention to, such as a referendum or open enrollment period. For short term items, like school closures, we recommend using an announcement in an Emergency Alert category.

The modal will pop up automatically when a visitor reaches your site. It won't pop up again until the visitor starts a new browsing session, but visitors can reopen it manually by clicking on the "information" button along the left side of their screen.

Selection & Creation

If a website admin has permission to edit the modal, they will see the "Modal Popup" item in the left menu of CMS4Schools admin interface. Clicking on menu item will bring the admin to a page where they can create new modals and edit the existing modals.

1. Add Modal Popup: Creates a new modal and redirects the admin to the page to edit it. See Content Editing for more information.
2. Timezone: Brings the admin to the page to configure the site's timezone, which will affect how the start and end dates are used. This should almost never need to be adjusted.
3. Activate: Selects which modal is currently active. Clicking on the active modal's radio button will deselect it. Only one modal may be active at a time.
4. Actions: Edit or delete a modal. For more information on editing the modal, see Content Editing.

Multiple modals may be stored in the system so that recurring items, like open enrollment periods, do not need to be rebuilt every year. A modal will only be visible if the following conditions are met:

• The "Activate" column is checked.
• The modal has been assigned to one or more page categories.
• The current date/time is after the start date.
• The current date/time is before the end date.

Content Editing

When creating or editing a modal, there are three groups of settings that an admin use to control the appearance of the modal: Required Settings, Button Settings, and Image Settings.

Required Settings

The required settings are the core content and controls for the modal. There are six fields in this section:

1. Page Categories: Controls which pages the modal will appear on. This can be used to restrict the modal to main district pages, or to the pages for individual schools.
2. Headline: The title that appears at the top of the modal. There is a limit of 255 characters.
3. Display Date and Timestamp: Controls whether the Start Date & Time and End Date & Time are visible to visitors.
4. Start Date & Time: Controls when the modal will start appearing.
5. End Date & Time: Controls when the modal will stop appearing.
6. Announcement: The body/content of the modal. We recommend that this is kept fairly concise and that you link to a page or group of pages that has more information.

Button Settings

Admins may create a call-to-action button that will appear at the bottom of the modal's content. There are three fields in this section:

1. Button Text: The text that will be displayed in the button. There is a limit of 25 characters.
2. Link Address for Button: The URL that the button will lead to.
3. Open Link in Browser Window Type: Controls whether the button will open as a new tab, or if it will use the current tab. We recommend setting it to "New Window" if it leads to a document or another website and to "Current Window" if it leads to a page on your site.

Image Settings

Admins may specify an image or link to an Embed Audio/Video tool on the site. If a video is specified it will override the image. Images will be displayed at their default aspect ratio; we recommend using short, banner-like images. There are four fields in this section:

1. Delete Current Image: Selecting this and saving the modal will delete the current image from the site.
2. Replacement Image: Admins may drag and drop images into the box or click to browse for an image on their computer. If there isn't already an image, this will be labeled "Image" instead of "Replacement Image."
3. Alt Text: Adds a description to the image that assistive tools can read to the user.
4. Attach a Video: Selecting this will allow the admin to pick an Embed Audio/Video tool from the site to display the embedded content in the modal.

Admin Permissions

There is a separate permission field that controls if an administrator can make changes to the Modal Popup. User accounts administrators that have permission to modify other user's website administrator permissions may grant this permission. To ensure that an website admin can edit the modal, check the "Modal Popup" box in the CMS4Schools > Web Site Administrator page of their account.