popup_lite

Overview

The Popup Lite module provides a lightweight and flexible system for managing various types of popups on your Drupal website. It leverages the powerful iziModal JavaScript library for modern and customizable modal dialogs, integrated seamlessly with Drupal's entity system.

This module allows site administrators to create, configure, and display popups with custom content, media, and dynamic behaviors based on page paths and other conditions.

Features

• PopupLite Entity: Defines a custom content entity to manage individual popup configurations, enabling full integration with Drupal's content management capabilities, including revisions and translations.
• Flexible Content Options: Each popup can include:
  • An administrative title.
  • Custom HTML content for header and main body.
  • Optional media attachments (images, audio, video) via Drupal's Media Library.
  • Configurable Call-to-Action (CTA) links.
  • Support for loading external content via iframes.
• iziModal Integration: Fully integrates the iziModal library for rich, animated, and highly customizable popup displays.
• Configurable Appearance & Behavior: Extensive options available for each popup, including:
  • Width and fullscreen modes.
  • Header color.
  • Overlay settings (presence, close on click).
  • Body overflow control (disable background scroll).
  • Customizable CSS classes for styling.
• Trigger & Interaction Control:
  • Basic trigger events (on_load, before_exit, manual).
  • Configurable auto-open delay for on_load popups.
  • Manual trigger element selection (CSS selector/ID).

Configuration

Managing Popups

Create and manage individual PopupLite entities at /admin/content/popup-lite

1. Add Popup: Click "Add Popup" to create a new popup entity.
2. Title: Provide an administrative title for your popup.
3. Content: Add HTML content for the header and main body.
4. Media: Attach media from your Media Library.
5. CTA Links: Configure call-to-action buttons.
6. Layout & Appearance: Adjust width, fullscreen mode, and header color.
7. Triggers & Behavior: Set when the popup should appear (on_load, before_exit, manual) and any auto-open delays.
8. Overlay & Interaction: Control overlay display, close behavior, and body scrolling.
9. Cookie Control: Manage cookie-based frequency capping.
10. Visibility: Define specific paths where the popup should be shown or hidden.
11. Modal Settings (JSON): Fine-tune iziModal options by providing a JSON object. This offers advanced customization beyond the standard fields.

Usage

Once configured, popups will be rendered on the frontend based on their settings

• Automatic Popups: Popups configured with on_load or before_exit triggers will appear automatically according to their rules.
• Manual Triggers: For popups set to manual trigger, assign a CSS selector (e.g., #my-button or .open-popup) in the popup's settings. Your frontend JavaScript or HTML can then open the popup by interacting with this element.

Extendability

• Any module can add new Template options with hook_popup_lite_template_alter
• Define the template in your custom module for Tempaltes
• Refer popup_lite.api.php for API implementations.
• New Popup Templates: Define new hook_theme() entries and corresponding Twig templates for different popup layouts (e.g., popup-lite-three-column).
• Custom Triggers/Conditions: Extend the getActivePopup() method in PopupLite.php or create custom services to implement more complex targeting rules (e.g., user roles, specific date/time ranges, browser/device detection).
• Custom iziModal Options: The modal_settings JSON field provides a flexible way to pass any iziModal option directly to the library without requiring new entity fields.