Quick Modal

About

Adds an easily configured JQuery controlled modal to Drupal 7 for use as an alert. This is the generic version of an internal alert module which is being used during the COVID-19 outbreak. We're finding it helpful and are sharing in the hope you do, too.

Messages can be customized using a limited set of HTML tags. Custom background images for desktop and mobile can be set for the modal. Can also be configured to display the message on internal pages.

Configuration Instructions

You can configure the message by selecting Admin -> Content Authoring -> Quick Modal. You can set the message displayed in the modal using the Modal Message field.

Modal Message

When you first install the module the Modal Message field contains sample content that is intended to help you get started quickly, with examples of the use of special HTML characters, attributes, images, and anchor links.

The Modal Message field is limited to the following html tags: p, div, img, a, em, strong, ul, ol, li, dl, dt, dd, span. Special HTML characters are supported. All HTML must be properly formatted. The class attribute is supported, along with a number of others (target and href for example). The style attribute is not supported.

Display Modal on Front Page

By default, the modal is set not to display (to give you a chance to configure the module). In order to display the modal on the front page, check the checkbox 'Display Modal on Front Page'. This will only effect the front page, and does not effect internal pages.

Internal Pages

To display the modal on an internal pages, enter page paths as one path per line. Do not use leading slashes (/). The '*' character is a wildcard. This will display the contents of the Modal Message field. The Modal Message field cannot be customized on a page by page basis. To disable an internal page, remove the corresponding path from the list.

CSS Class(es)

Custom classes can be applied to the modal window (quick-modal-modal-window). Separate each class with a space. Use with caution.

Styles

Custom inline styles can be applied to the modal window (quick-modal-modal-window). Enter styles as you would for any HTML tag (for example: font-size:20px;font-weight:bold;). Use with caution.

Background Image Settings

Custom Modal Backgrounds

Custom backgrounds can be set to display on mobile (viewport equal to or less than 965px wide) and desktop (viewport greater than 965px wide). Images must be .jpeg, .jpg or .png files. There are no file size or image dimension restrictions, so use your best judgement.

The module includes a couple of sample backgrounds that are set as the default (see included readme.txt). It is recommended that you attach different backgrounds (or disable backgrounds) to meet your particular requirement.

Display Backgrounds

To turn off all backgrounds (both custom and default), un-check the checkbox 'Display Backgrounds'. The background color is set to a neutral bluish-white. It is recommended you set a custom background color using CSS Class(es), above.

User Interface Settings

Background As Close Button

To make the modal less obtrusive and distracting, check the checkbox to set the semi-transparent viewport background as a "close button". The modal will load completely and be visible for 3 seconds before the modal window can be closed, ensuring that the guest will be fully aware of the modal presence and importance.

Once Per Session

If you wish to only show the modal once per guest session, check the "Once Per Session" checkbox. The module will check for a cookie that is created upon modal close and if present will block the formatting and encoding of the modal. As this is session based, the next time the guest returns to the site the modal will display once again.

Permissions

Users must have the Administer Quick Modal permission in order to configure the module.

Troubleshooting

If you are having trouble with changing any of the content or style (we've experienced some issues changing attributes), try clearing the site cache (Admin -> Configuration -> Performance -> Clear all caches).

This module tries to place itself at a z-index of 999, but other overlay elements may interfere with the display. Make sure you disable any existing modals on the front page (or related interior pages) to avoid any layout issues.

Acknowledgements

This module was built for Sage Age Strategies, and shared with the hope that you find it useful in your projects.