Flyin
Usage Examples

Experience Flyin

Click the button below to see Flyin in action with a full-featured, responsive, and accessible popup example.

Documentation

For detailed information on settings, CSS variables, and more examples, please check our documentation.

Browse Documentation

How to Use

1. Prepare popup content: Create a DIV with popup content and hide it using inline style:

<div id="my-popup" data-title="Flyin Popup" style="display: none;">
    <p>Popup Content</p>
</div>

2. Load Library Files: Include the CSS and JavaScript files in your HTML:

<!-- Load Styles -->
<link rel="stylesheet" href="dist/flyin.css">

<!-- Load Scripts -->

<script src="dist/flyin.umd.js"></script>

3. Initialize Flyin: Initialize the popup in your JavaScript:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        new Flyin("#my-popup", {
            settings: {
                effect: 'bounce',
                style: 'plain-white'
            }
        });
    });
</script>

Examples

Explore different use cases and configurations of Flyin through our interactive examples:

Basic Usage Simple initialization and manual opening.
Skins and Styles Showcase 10+ visual looks and layout skins.
Animations Test 15+ supported entry and exit effects.
Callbacks Monitor and respond to popup lifecycle events.
Interactions Control escape keys, overlays, and auto-closing.
Keyboard Shortcuts Bind custom keys to open and close popups.
Custom Styling Applying extra classes and overriding CSS.
Modal Modes Compare modal vs. non-modal interactions.
Positioning Place popups anywhere with smart offsets.
Auto-Triggers Automatic opening and exit intent detection.
Dimensions Responsive control over width and height.
Header & Footer Configuring titles and custom footer content.
Predefined Content Create popups from HTML strings and update content.
Container Targeting Inject popups into specific elements instead of body.
Advanced Settings Expert configuration, persistence, and targeting.
Auto-Show Control Limit how often popups appear automatically.
Custom UI & Action Custom close buttons and header HTML.
Accessibility ARIA roles and screen reader optimization.
GitHub Repository Visit dev4Press