Flyin

Initialization Settings

When initializing Flyin, you can pass a settings object to customize the behavior and appearance of your popup.

Note: Many settings can be overridden by data-* attributes on the popup element. Data attributes take precedence over initialization settings.

new Flyin("#my-popup", {
    settings: {
        // parameters here
    },
    callbacks: {
        // callbacks here
    }
});

Data Attribute Overrides

• data-title: Overrides headerContent and enables title.
• data-title-tag: Overrides titleTag.
• data-modal: Overrides modal (true/false).
• data-on-load: Overrides onLoad (true/false).
• data-on-load-delay: Overrides onLoadDelay (number in ms).

Core Settings

• name (string|null): Unique name for the popup instance. Default: null.
• role (string): WAI-ARIA role for the dialog. Default: 'dialog'.
• style (string): CSS class for the popup skin. Default: 'plain-white'.
• effect (string): Entry effect. Use 'random' or specific effect name. Default: 'random'.
• effectSpeed (number): Duration of the effect in seconds. Default: 0.7.
• modal (boolean): Whether to show a modal overlay. Default: true.
• zIndex (number): Base z-index for the popup. Default: 1000000.
• containerSelector (string): Selector for the container element where the popup will be appended. Default: 'body'.
• extraClass (string): Additional CSS class for the popup wrapper. Default: ''.
• title (boolean|string): Whether to show a title. If string, it's used as title text. Default: true.
• titleTag (string): HTML tag for the title. Default: 'h5'.
• copy (boolean): Whether to copy the element instead of moving it. Default: false.
• content (string|HTMLElement): HTML content for the popup. Default: ''.

Position and Size

• width (string|number): Width of the popup (e.g., '40%', '500px', 600). Default: '40%'.
• height (string|number): Height of the popup. Default: 'auto'.
• positionX (string|number): Horizontal position ('center', 'left', 'right', or numeric offset). Default: 'center'.
• positionY (string|number): Vertical position ('center', 'top', 'bottom', or numeric offset). Default: 'center'.
• offsetX (string|number): Horizontal offset. Default: '10px'.
• offsetY (string|number): Vertical offset. Default: '10px'.
• minWidth (string|null): Minimum width constraint. Default: 'min(200px, 90%)'.
• maxWidth (string|null): Maximum width constraint. Default: '95%'.
• minHeight (string|null): Minimum height constraint. Default: null.
• maxHeight (string|null): Maximum height constraint. Default: null.

Triggers

• onLoad (boolean): Open automatically when page loads. Default: true.
• onLoadDelay (number): Delay in milliseconds before auto-opening. Default: 500.
• onLeaveTop (boolean): Open when mouse leaves the top of the viewport. Default: false.
• onLeaveTopOffset (number): Distance from the top edge in pixels to trigger onLeaveTop. Default: 3.
• onLeaveViewport (boolean): Open when mouse leaves the viewport. Default: false.

Closing Options

• closeEscape (boolean): Close on Escape key press. Default: true.
• closeOverlay (boolean): Close when clicking on the overlay. Default: true.
• closeAuto (boolean): Automatically close after a delay. Default: false.
• closeAutoDelay (number): Delay in milliseconds for auto-closing. Default: 0.
• ariaCloseLabel (string): ARIA label for close buttons. Default: 'Close this dialog'.

Keyboard Shortcuts

• keysOpen (string|null): Keyboard shortcut to open the popup. Default: null.
• keysClose (string|null): Keyboard shortcut to close the popup. Default: null.

Overlay Settings

• overlayActive (boolean): Enable/disable overlay. Default: true.
• overlayColor (string): CSS color for overlay. Default: '#ffffff'.
• overlayOpacity (number): Opacity from 0 to 1. Default: 0.7.
• overlaySpeed (number): Transition speed in seconds. Default: 0.07.

Storage Settings

• savePositionSize (boolean): Save position and size for next visit. Default: true.
• storeCode (string): Unique code for the popup storage. Default: '' (empty). If empty, storage is disabled.
• storePositionSizeCode (string): Base key for position/size storage. Default: 'flyin-position-size'. The full key used is storePositionSizeCode + '-' + storeCode.
• storePositionSizeExpiration (number): Days until the saved position and size expire. Default: 365.
• save (Record<string, any>): Additional data to save in the popup storage. Default: {}.

Auto-Show Settings

• autoShowLimit (boolean): Limit the number of times the popup is shown automatically. Default: false.
• autoShowCounter (number): Maximum number of times to show. Default: 5.
• autoShowDelay (number): Days before the counter resets. Default: 7.

Header and Footer

• header (boolean): Show popup header. Default: true.
• headerContent (string|boolean|HTMLElement): Custom content for header. Default: false.
• footer (boolean): Show popup footer. Default: true.
• footerContent (string|boolean|HTMLElement): Custom content for footer. Default: false.
• buttonX (boolean): Show close button in header. Default: true.
• buttonXContent (string|null): Custom HTML/text for the header close button (overrides SVG). Default: null.
• buttonXSVG (string): SVG code for the header close button icon.
• buttonFooter (boolean): Show close button in footer. Default: true.
• buttonFooterContent (string): Text for footer close button. Default: 'Close'.
• buttonAction (function): Custom callback function for the close buttons. Sends Flyin instance.

Advanced and Skin Settings

• attrWrapper (string): Additional attributes for the wrapper element.
• attrHeader (string): Additional attributes for the header element.
• attrContent (string): Additional attributes for the content element.
• attrFooter (string): Additional attributes for the footer element.
• showGrip (boolean): Show resize grip (requires resizable skin). Default: false.
• gripSVG (string): SVG code for the resize grip icon.
• sizeMinWidth (number): Minimum width for resizing. Default: 200.
• sizeMinHeight (number): Minimum height for resizing. Default: 100.
• resizeMargin (number): Margin in pixels around the edge for resize detection. Default: 5.

Callbacks

• prepared: Triggered when popup is prepared. Sends Skin instance.
• ready: Triggered when popup is ready. Sends Flyin instance.
• beforeOpen: Lifecycle event triggered before opening. Sends Skin instance.
• afterOpen: Lifecycle event triggered after opening. Sends Skin instance.
• beforeClose: Lifecycle event triggered before closing. Sends Skin instance.
• afterClose: Lifecycle event triggered after closing. Sends Skin instance.
• beforeMove: Lifecycle event triggered before movement. Sends Flyin instance.
• afterMove: Lifecycle event triggered after movement. Sends Flyin instance.
• beforeResize: Lifecycle event triggered before resizing. Sends Flyin instance.
• afterResize: Lifecycle event triggered after resizing. Sends Flyin instance.