jQuery Plugin To Show A Popup Only Once Per Visitor - First Visit Popup

File Size: 7.23 KB
Views Total: 61703
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Show A Popup Only Once Per Visitor - First Visit Popup

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.