Cookie-enabled jQuery Modal Popup Plugin - JPopup

File Size: 85.8 KB
Views Total: 1603
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cookie-enabled jQuery Modal Popup Plugin - JPopup

JPopup is a super simple, fully configurable jQuery modal popup plugin used to overlay any Html content on top of the webpage, with smooth open/close animations based on CSS3 properties. Cookie popup is supported that helps you create modal popups only for new visitors.

How to use it:

1. Load the latest version of jQuery JavaScript library (slim build) in the html page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>

2. Load the JPopup plugin's JavaScript and CSS in the page.

<link href="jpopup.min.css" rel="stylesheet">
<script src="jpopup.js"></script>

3. The JavaScript to create a basic modal popup that auto appears on page load.

$.JPopup({
  content: "Hello world!
});

4. Config the modal popup by passing the following options:

$.JPopup({

  // enable/disable debug mode
  verbose: true,
  hidden: false,
  

  // close button options
  closeButton: '<i class="module-popup__close__button"></i>',
  closeButtonPosition: 'right top',

  // whether to center the text
  textCenter: false,

  // max width of the popup
  maxWidth: false,

  // time in ms before popup displayed
  delay: null,

  // timeout in ms between two popups
  noiseTime: 5000
  
});

5. Enable cookies on your modal popup.

$.JPopup({

  // enable/disable cookies
  cookie: false,

  // cookie name
  cookieName: '',

  // enable/disable cookie session
  cookieSession: false,

  // expire time
  cookieExpires: 30,

  // cookie path
  cookiePath: '/'

});

This awesome jQuery plugin is developed by FarkasJanos. For more Advanced Usages, please check the demo page or visit the official website.