Multi-purpose Popup Box Plugin - jQuery Corner Popup

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="css/corner-popup.min.css">
<script src="" 
<script src="js/corner-popup.min.js"></script> 

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

  popupimg: "image.png",
  link1: "",
  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
  'variant': 1

4. Customize the appearance of the popup box.

  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"

5. More customization options with default values.

  // 0 = disable
  active: 1,
  // 1 = slide animation
  // 0 = fade animation
  slide: 0,
  // 1 = slide top
  slidetop: 0,
  // auto dismisses after this timeout
  timeout: 0,
  // 1 = shows close button
  closebtn: 1,
  // link for standard popup
  link1: "",
  // link for other popups
  link2: "#",
  // 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="" 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"

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

  • Publication date: 25.01.2019
  • Source