Popup

wiz-popup is a cross-channel popup component that extends the wiz-grid component to display content in a modal dialog. It supports customizable close buttons, overlay effects, and interaction modes. The component works seamlessly across e-Detailers and emails with channel-specific behavior and styling.

The cross-channel popup component has the following key features:

• Modal dialog with customizable close button.

• Configurable close button position and icon.

• Close-on-outside-tap functionality in e-Detailers only.

• Semi-transparent overlay support.

• Auto-open on slide enter in e-Detailers.

• Two-way binding with .sync modifier.

• Open and close event tracking.

Installation

The wiz-popup component is part of the eWizard.js component library. To install it to your project, run the following command in the terminal:

wiz install @component/wiz-popup

Register the component globally in your application or import it in your Vue template.

Properties

The wiz-popup component has the following properties:

Property	Type	Default	Description
componentName	String	'Popup (Grid)'	The display name for the component in eWizard Editor.
showCloseButton	Boolean	true	Whether to display the close button on the popup.
closeButtonIcon	String	SVG icon	Path to the close button icon image. Defaults to a built-in close icon.
closeButtonPosition	String	'right-top'	Position of the close button. Valid options: 'right-top', 'right-center', 'right-bottom', 'center-top', 'center-center', 'center-bottom', 'left-top', 'left-center', 'left-bottom'.
closeOnOutsideTap	Boolean	true	Whether the popup closes when clicking/tapping outside the popup area. Only applies to e-Detailers.
showOnEnter	Boolean	false	Whether the popup automatically opens when entering the slide. Only applies to e-Detailers.
showOverlay	Boolean	true	Whether to display a semi-transparent overlay behind the popup. Only applies to e-Detailers.
opened	Boolean	false	Controls the open/closed state of the popup. Two-way binding supported via .sync modifier.
zIndex	Number	99999	The z-index CSS property for layering the popup above other content.

Slots

The wiz-popup component inherits slot functionality from the wz-grid component and supports grid-based content placement. Content passed to the component will be rendered within the popup grid structure.

Default slot. Accepts grid items and layout content to be displayed inside the popup.

Example:

<wiz-popup :opened.sync="popupOpen">
  <wiz-grid-item>
    <p>Your popup content goes here</p>
  </wiz-grid-item>
</wiz-popup>

Custom events

The cross-channel popup component emits the following custom events for interaction tracking and custom behavior:

Event	Payload	Description
open	None	Emitted when the popup is opened.
close	Event object	Emitted when the popup is closed. Passes the click/tap event that triggered the close action.
update:opened	Boolean	Emitted to support two-way binding with the opened prop via .sync modifier.

Event usage example

<template>
  <wiz-popup 
    :opened.sync="isPopupOpen"
    @open="onPopupOpen"
    @close="onPopupClose"
  >
    <!-- Popup content -->
  </wiz-popup>
</template>

<script>
export default {
  data() {
    return {
      isPopupOpen: false,
    };
  },
  methods: {
    onPopupOpen() {
      console.log('Popup opened');
    },
    onPopupClose(event) {
      console.log('Popup closed', event);
    },
  },
};
</script>

Channel-specific behavior

The cross-channel popup component adapts its rendering and functionality based on the content item context.

• Full interactive modal functionality with overlay support.

• Supports closeOnOutsideTap, showOnEnter, and overlay features.

• Uses CSS transitions for smooth open/close animations.

• Supports z-index layering for proper stacking.

• Popup renders as a static grid component.

• Close button and overlay features are deactivated/hidden.

• Designed for fallback display in email clients.

• No interactive animations or transitions.

Dependencies

The wiz-popup component depends on the following packages and components:

• @component/wiz-image: For rendering the close button icon.

• @component/wiz-grid: Base component that wiz-popup extends.

• ewizardjs: Core framework dependency.

• @ewizardjs/component-types: Type definitions for component configuration.

Notes

• The component integrates with the eWizard.js $navigator for detecting slide enter events.

• An outside-click directive is automatically applied to e-Detailer popups to handle outside tap detection.

• The component uses Vue transitions for smooth animations (except in the EDIT mode in eWizard Editor).

• The overlay is rendered using Vue's <portal> to the slide root.

• Close button styling uses CSS positioning based on the closeButtonPosition value.