Create Non-intrusive Popunder Ads Using The Popunder Plugin

File Size: 50.9 KB
Views Total: 439
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create Non-intrusive Popunder Ads Using The Popunder Plugin

Nowadays popunder ads are a very popular form of interactive advertising since they don't interfere with your website functions or layout. 

 A popunder is defined as a non-intrusive window which opens behind the currently active window while the user is browsing a website.

Here is a lightweight yet fully customizable jQuery popunder plugin that can be used to show ads, promote a subscription, or just to open a new page  under the browser tab that's currently in use. Enjoy it.

How to use it:

1. Load jQuery and js-cookie (used for blocking popunders) libraries in the document.

<!-- Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Optional -->
<script src="/path/to/cdn/js.cookie.min.js"></script>

2. Download and load the jQuery Popunder plugin after jQuery.

<script src="dist/jquery.popunder.min.js"></script>

3. Open a popunder via button click.

<form id="test" action="https://www.google.com" method="GET">
  <input type="hidden" name="q" value="jquery-popunder" />
  <input id="submitButtonOneClick" type="submit" value="Open Popunder via Button-Click" />
</form>
window.fPopunder = function(event) {
  if (!window.fPopunderStack) {
    window.fPopunderStack = [
      ['https://www.bing.com']
    ];
  }
  return window.fPopunderStack;
};
$.popunder(window.fPopunder, '#test', '#test input[type="submit"]');

4. Open multiple popunders at a time.

window.aThreePopunder = [
  ['https://www.github.com', {window: {height:400, width:400}, blocktime: 1}],
  ['https://www.bing.com', {window: {height:100, width:100}, cb: function() {
    console.log('bing.com has been opened');
  }}],
  ['https://www.google.com']
];
$.popunder(window.aThreePopunder, '#test', '#test input[type="submit"]');

5. Open multiple popunders at a time.

window.aThreePopunder = [
  ['https://www.github.com', {window: {height:400, width:400}, blocktime: 1}],
  ['https://www.bing.com', {window: {height:100, width:100}, cb: function() {
    console.log('bing.com has been opened');
  }}],
  ['https://www.google.com']
];
$.popunder(window.aThreePopunder, '#test', '#test input[type="submit"]');

6. Open a popunder via a normal link.

<a href="#" onclick="$.popunder(this)">Open Popunder via Link</a>
window.aPopunder = [
  ['https://www.bing.com']
];

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