Popup Modals Block
Overview
The Popup Modals Block is a versatile component in the Phenix Design System that allows you to create customizable modal dialogs. These modals can be triggered by various elements and can contain any type of content, making them ideal for displaying additional information, forms, images, or other interactive elements without navigating away from the current page.
The block creates a full-screen overlay with a customizable content area that can be styled to match your design requirements. Each modal requires a unique ID for proper triggering and functionality.
Key Features
- Create responsive modal dialogs with customizable content
- Flexible positioning and alignment options
- Customizable backdrop for the modal overlay
- Support for any content type within the modal (text, images, forms, etc.)
- Automatic close button integration
- Accessibility features for keyboard navigation
- Responsive design that works across all device sizes
Block Structure
The Popup Modals Block consists of two main components:
- Modal Container: A full-screen overlay that serves as the backdrop and container for the modal
- Modal Content: A customizable content area that contains your information and a close button
When added to a page, the block automatically includes a close button in the top-right corner of the content area for easy dismissal.
Block Settings
General Settings
Option | Description |
---|---|
Modal ID | Sets a unique identifier for the modal, which is used for triggering the modal from buttons or links |
Style Options
The Popup Modals Block includes comprehensive styling options through the Phenix Design System:
Category | Available Options |
---|---|
Layout | Flexbox properties, alignment, positioning |
Spacing | Padding, margins |
Typography | Text size, weight, alignment, color |
Background | Colors, gradients |
Border | Width, style, color, radius |
Effects | Shadows, opacity |
Responsive Controls
All style options can be customized for different screen sizes:
- Default (all screens)
- Medium devices (tablets)
- Large devices (desktops)
- Extra large devices (large screens)
How to Use
Adding a Popup Modal
- In the WordPress editor, click the "+" button to add a new block
- Search for "Popup/Modal" or find it in the "Phenix Blocks" category
- Add the block to your page
- Set a unique Modal ID in the block settings panel
- Customize the content and appearance using the block tools
Creating a Trigger
To open the modal, you need to create a trigger element (typically a button) with the following attributes:
data-modal="your-modal-id"
- Points to the Modal ID you sethref="#your-modal-id"
- Alternative method using anchor links
Example using a Button Block:
<!-- wp:phenix/button {
"label":"Open Modal",
"attributes":{"data-modal":"my-popup-1"}
} /-->
Implementation Details
HTML Structure
When implemented, the Popup Modals Block generates the following HTML structure:
<div id="my-popup-1" class="px-modal hidden w-fluid h-100vh flexbox px-popup pos-top-0 position-fx pos-start-0 px-scrollbar z-index-modal overflow-y-auto">
<div class="model-content mgx-auto col position-rv z-index-10 bg-white">
<button class="modal-close btn square tooltip-bottom far fa-times fs-18 bg-danger radius-circle position-ab z-index-modal" style="top:15px;right:15px;"></button>
<!-- Your content here -->
</div>
</div>
JavaScript Integration
The Popup Modals Block integrates with the Phenix JavaScript framework through the .popup()
method, which provides the following functionality:
- Modal triggering through buttons, links, or programmatic calls
- Opening/closing animations
- Backdrop click handling
- Keyboard accessibility (ESC key support)
- Scroll locking when modal is open
- Support for lightbox functionality for images and media
Trigger Options
The Popup Modals Block supports several triggering methods through the Phenix JavaScript framework:
Trigger Attribute | Description |
---|---|
data-modal="modal-id" | Standard trigger that opens the modal with the specified ID |
href="#modal-id" | Link-based trigger (except for links with target="_blank" ) |
data-type="lightbox" | Configures the modal for lightbox functionality |
data-onload="true" | Opens the modal automatically when the page loads |
data-timeout="2000" | Sets a delay (in milliseconds) before showing the modal |
data-showon="#element-id" | Shows the modal when a specific element comes into view |
data-hash="true" | Opens the modal if the URL hash matches the modal ID |
Styling Options
Modal Container
The modal container supports all standard Phenix Design System styling options, including:
- Flexbox Properties: Control the alignment and distribution of content
- Background: Set background colors or gradients for the modal overlay
- Spacing: Add padding and margins to create proper spacing
- Typography: Control text appearance within the modal
Modal Content
The content area is implemented as a Group Block with default styling that can be customized:
- Default maximum width of 640px
- White background
- 30px padding on all sides
- Relative positioning with z-index for proper stacking
Best Practices
Unique IDs: Always use unique IDs for each modal to prevent conflicts
Appropriate Content: Use modals for supplementary content that doesn't disrupt the main user flow
Accessible Design: Ensure modals are keyboard accessible and screen reader friendly
Mobile Optimization: Test modal appearance and usability on mobile devices
Clear Close Options: Always include a visible close button and maintain backdrop click functionality
Performance: Be mindful of loading large content in modals to maintain performance
Consistent Design: Maintain design consistency with your site's overall aesthetic
Related Blocks
- Button Block - For creating custom modal triggers
- Group Block - For organizing content within modals
- Icon Element Block - For adding icons to modal content or triggers