Cookie-enabled jQuery Modal Popup Plugin - JPopup

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.

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.

  • Publication date: 14.12.2017
  • Source