jQuery Plugin To Show A Popup Only Once Per Visitor - First Visit Popup
File Size: | 7.23 KB |
---|---|
Views Total: | 61910 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
First Visit Popup is tiny jQuery plugin which uses browser cookies to show up a modal popup (e.g. welcome modal) to first-time visitors.
Basic usage:
1. Add jQuery library and the jQuery first visit popup plugin at the bottom of the web page.
<script src="jquery.min.js"></script> <script src="jquery.firstVisitPopup.js"></script>
2. Insert your welcome messages into the modal popup.
<div id="my-welcome-message"> <h2>Welcome to my site</h2> <p>Hello, welcome to my website.</p> </div>
3. Enable the plugin.
$('#my-welcome-message').firstVisitPopup({ cookieName : 'homepage', showAgainSelector: '#show-message' });
4. Create your own CSS to style the welcome modal.
#fvpp-blackout { display: none; z-index: 499; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: 0.5; } #my-welcome-message { display: none; z-index: 500; position: fixed; width: 36%; left: 30%; top: 20%; padding: 20px 2%; font-family: Calibri, Arial, sans-serif; background: #FFF; } #fvpp-close { position: absolute; top: 10px; right: 20px; cursor: pointer; } #fvpp-dialog h2 { font-size: 2em; margin: 0; } #fvpp-dialog p { margin: 0; }
This awesome jQuery plugin is developed by chriscook. For more Advanced Usages, please check the demo page or visit the official website.