jQuery Plugin To Show A Popup Only Once Per Visitor - First Visit Popup
| File Size: | 7.23 KB |
|---|---|
| Views Total: | 62119 |
| 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.











