Multi-purpose Popup Box Plugin - jQuery Corner Popup

The Corner Popup jQuery plugin gives you a flexible, multi-purpose, and highly customizable popup box solution for modern web design.

Can be used for alert dialog, cookie notice popup, toast notification, confirmation popup, and much more.

Key features:

• Slide or fade animations.
• Auto dismisses after a timeout. Useful for toast notification.
• Custom image in the popup box.
• AJAX content loading.
• Custom action buttons.
• Can be positioned on the left bottom, middle bottom or right bottom of the page.
• Up to 10 variants to fit your any needs.

How to use it:

1. Include the Corner Popup's JavaScript and Stylesheet on the webpage. Note that the plugin needs the latest jQuery library to work.

<link rel="stylesheet" href="/path/to/css/corner-popup.min.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/corner-popup.min.js"></script> 

2. Create a standard popup box on the right bottom of the webpage.

$('body').cornerpopup({
  popupimg: "image.png",
  link1: "https://www.jqueryscript.net",
  header: "Header Content",
  button1: "Read More"
});

3. Specify the popup type you want to use. All possible variants:

1. stardard popup
2. cookie notice popup
3. message popup with button
4. message popup without button
5. text popup
6. information popup
7. header only
8. header+text
9. header+text+image
10. custom content

$('body').cornerpopup({
  'variant': 1
});

4. Customize the appearance of the popup box.

$('body').cornerpopup({
  shadow: 1,
  width: "390px",
  font: "'Open Sans', 'Halvetica', sans-serif",
  colors: "#543189",
  bgcolor: "#fff",
  bordercolor: "#efefef",
  textcolor: "#181818",
  iconcolor: "#543189",
  btncolor: "#543189",
  btntextcolor: "#fff",
  corners: "0px",
  padding: 0
});

5. More customization options with default values.

$('body').cornerpopup({

  // 0 = disable
  active: 1,
  
  // 1 = slide animation
  // 0 = fade animation
  slide: 0,

  // 1 = slide top
  slidetop: 0,

  // auto dismisses after this timeout
  timeout: 0,

  // shows the popup after the amount of time you set
  delay: 0,

  // 1 = shows close button
  closebtn: 1,
  
  // link for standard popup
  link1: "https://wp.pl, _self",

  // link for other popups
  link2: "#, _self",

  // image for standard popup
  popupimg: "img/img-1.png",

  // image for cookie notice popup
  cookieimg: "img/cookie.png",

  // image for message popup
  messageimg: "img/icon-3.png",
  
  // text for cookie notice popup
  text1: 'This website uses cookies to ensure you get the best experience on our website. <a href="http://www.allaboutcookies.org" target="_blank" class="cookie-more">More information.</a>',

  // text for other popups
  text2: "This is just a sample text. Feel free to change it to your own using proper parameter.",

  // custom buttons
  button1: "more",
  button2: "Got it", // for cookie notice popup
  button3: "OK",

  // for custom content popup
  content: "Your own html here.",

  // used for external source
  loadcontent: "no",

  // left, center or right
  position: "right",

  // closes pop-up window after Escape key is pressed
  // 1 = true
  escClose: 0,

  // sticks pop-up window to the edge of the browser
  // 1 = true
  stickToBottom: 0,

  // makes the popup appear at the top of the browser window
  topCorner: 0

});

6. Show/hide the popup manually. The 'delay' parameter is optional.

$.fn.cornerpopup.popupClose(delay);
$.fn.cornerpopup.popupHide(delay);
$.fn.cornerpopup.popupShow(delay);

7. Event handlers.

$('body').cornerpopup({

  beforePopup : function(){},
  afterPopup : function(){},
  onBtnClick: function(){}

});

Changelog:

2023-12-28

• Added new event onCloseBtnClick, jQuery version update

2021-12-15

• Keyboard accessibility improvements

2020-12-24

• Fixed bug with non-working button "target" attribute

2020-09-27

• Fixed button links not working on Safari
• Improved appearance on mobile

2020-09-19

• Added the ability to change the "target" attribute in link1 and link2 option

2020-03-11

• Added delay and topCorner options.

2020-03-09

• Added new options (padding, stickToBottom) and new event (onBtnClick)

2020-03-07

• Removed bug causing malfunction of loadContent option

2020-03-02

• Corrected column setting for width in percent / close button bug on higher width

2020-03-01

• Removed errors with columns and buttons on width change
• Added new methods with delay option

2020-02-17

• Improved compatibility with Bootstrap 4

2019-07-26

• Added method/events, fixed error with position: left/right on mobile

2019-07-15

• Corrected problem with the Escape button

---

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