Available Skins
Flyin comes with two built-in JavaScript skins that define the behavior and core structure of the popups.
Base Skin
The Base skin is the default implementation. It provides a standard, centered (configurable) popup that can be modal or non-modal. It is designed for simple notifications, alerts, and content display.
- Standard lifecycle management
- Centering and positioning logic
- Overlay and focus management
- Responsive and accessible
Resizable Skin
The Resizable skin is an advanced implementation that adds interactivity to your popups. It allows users to manually move and resize the popup on the screen.
- Draggable: Users can move the popup by clicking and dragging the header.
- Resizable: Users can resize the popup from edges or corners.
- Grip Support: Optional visual grip in the footer for easier resizing.
- Persistence: Can save the last position and size in local storage, so the popup appears exactly where the user left it on the next visit.
How to Use
By default, Flyin uses the Base skin. You can specify the Resizable skin during initialization.
<script>
// Using the default Base skin
new Flyin('#my-popup');
// Using the Resizable Skin for a draggable/resizable popup
new Flyin('#my-free-popup', {
skin: 'resizable',
settings: {
showGrip: true,
savePositionSize: true
}
});
</script>