Cookie-enabled Exit Intent Popup Plugin - Stick to me
File Size: | 9.07 KB |
---|---|
Views Total: | 11791 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another 'Exit Popup' plugin built with jQuery Vanilla JavaScript that displays a configurable, cookie-enabled popup window when the user is about to leave the current page.
It detects the mouse position (when it is moving up to the address bar) and then fires an event to trigger a modal popup.
See Also:
How to use it:
1. Include the stylesheet stick-to-me.css
to style the exit popup.
<link rel="stylesheet" href="stick-to-me.css">
2. Add your own content to the exit popup.
<div id="stickLayer" style="display:none;" class="stick_popup"> <div class="stick_close" onclick="$.stick_close()">X</div> <div class="stick_content"> <h1>Goodbye!</h1> </div> </div>
3. Include the main JavaScript file stick-to-me.js
at the bottom of the webpage.
<script src="stick-to-me.js"></script>
4. Initialize the plugin to create a default exit popup when the cursor moves out of view.
document.addEventListener('DOMContentLoaded', function() { const stickToMeInstance = stickToMe({ layer: '#stickLayer' }); // Add event listener to close button document.querySelector('.stick_close').addEventListener('click', stickToMeInstance.close); });
5. You are able to config the exit popup with the following options.
const stickToMeInstance = stickToMe({ // Animation speed in ms fadespeed: 400, // Where detection of exit intent takes place trigger: ['top'], // min/max time maxtime: 0, mintime: 0, // Delay before showing popup when exit intent is detected delay: 0, // Interval between popups interval: 0, // Maximum times the popup will be triggered // 0 = unlimited maxamount : 0, // Set cookie to prevent opening again on the same browser cookie : false, // Define the cookie expiration in seconds cookieExpiration: 0, // Clickon background to close the popup bgclickclose : true, // Press ESC to close the popup escclose : true, // Chrome disable disableleftscroll : true, // Enable debug mode debug: false, // Callback function onleave : function (e) {}, });
Changelog:
v2.0 (2024-10-19)
- Removed jQuery dependency
- Improved performance and maintainability
- New Debug mode for easier troubleshooting
2021-03-18
- Add a more professional X closer
This awesome jQuery plugin is developed by guiassemany. For more Advanced Usages, please check the demo page or visit the official website.