Multi-purpose Popup Box Plugin - jQuery Corner Popup

Multi-purpose Popup Box Plugin - jQuery Corner Popup
File Size: 135 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="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"
});

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,

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

  // 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="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"

});

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