Initialization with DIV
The most common way to use Flyin is to have a hidden DIV in your HTML and initialize it.
<!-- HTML -->
<div id="my-popup" data-title="My Popup Title" style="display: none;">
<p>This is the content of my popup.</p>
</div>
<!-- JavaScript -->
<script>
new Flyin("#my-popup", {
settings: {
style: 'sky-blue',
effect: 'fade-in-down'
}
});
</script>Custom Content in Settings
You can create a popup with content defined directly in the settings instead of an existing element.
<script>
new Flyin(null, {
settings: {
title: "Dynamic Popup",
content: "<div><p>This content is passed via settings.</p></div>",
onLoad: true
}
});
</script>Initialization with HTMLElement
You can pass a DOM element directly to the constructor.
<script>
const myElement = document.createElement('div');
myElement.innerHTML = "<p>Created programmatically.</p>";
new Flyin(myElement, {
settings: {
title: "HTMLElement Example"
}
});
</script>Using Callbacks
Monitor the lifecycle of your popup using callbacks.
<script>
new Flyin("#my-popup", {
callbacks: {
beforeOpen: function(core) {
console.log("Popup is about to open");
},
afterOpen: function(core) {
console.log("Popup is now open");
},
afterClose: function(core) {
console.log("Popup has been closed");
}
}
});
</script>Keyboard Shortcuts
Bind specific key combinations to open or close the popup.
<script>
new Flyin("#my-popup", {
settings: {
keysOpen: "Control+Shift+f", // Open with Ctrl+Shift+F
keysClose: "Control+Shift+c" // Close with Ctrl+Shift+C
}
});
</script>Advanced Settings Example
Combining multiple settings for a highly customized experience.
<script>
var myFlyin = new Flyin("#my-popup", {
settings: {
modal: true,
width: '600px',
effect: 'bounce',
closeAuto: true,
closeAutoDelay: 5000, // 5 seconds
headerContent: "<h3>Important Alert</h3>",
footerContent: "<p>Please read carefully.</p>",
overlayColor: "#000000",
overlayOpacity: 0.8
}
});
// You can also control the popup manually
// myFlyin.open();
// myFlyin.close();
</script>Auto-Show Control
Limit how many times a popup appears automatically using persistence.
<script>
new Flyin("#my-popup", {
settings: {
onLoad: true,
storeCode: 'promo-popup',
autoShowLimit: true,
autoShowCounter: 3, // Show max 3 times
autoShowDelay: 7 // Reset counter after 7 days
}
});
</script>Custom Close Button & Header
Replace the default close icon with custom text or SVG, and add custom header HTML.
<script>
new Flyin("#my-popup", {
settings: {
headerContent: "<div class='custom-header'>🌟 Premium</div>",
buttonXContent: "CLOSE",
buttonAction: function(instance) {
if (confirm("Close this?")) {
instance.close();
}
}
}
});
</script>Accessible Popup
Enhance accessibility with ARIA roles, labels, and custom attributes.
<script>
new Flyin("#my-popup", {
settings: {
role: "alertdialog",
ariaCloseLabel: "Close notification",
attrWrapper: 'aria-describedby="popup-desc"'
}
});
</script>