Corner Popup jQuery插件为您提供了一个灵活、多用途、高度可定制的弹出框解决方案，用于现代网页设计。

可用于警报对话框、cookie通知弹出窗口、吐司通知、确认弹出窗口等。

主要功能：

• 滑动或淡入淡出动画。
• 超时后自动解除。用于吐司通知。
• 弹出框中的自定义图像。
• AJAX内容加载。
• 自定义动作按钮。
• 可以定位在页面的左下角、中下角或右下角。
• 多达10种变体，可满足您的任何需求。

如何使用它:

1.在网页上包含角点弹出菜单的JavaScript和样式表。请注意，该插件需要最新的jQuery库才能工作。

<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.在网页的右下方创建一个标准的弹出框。

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

3.指定要使用的弹出窗口类型。所有可能的变体：

1. 标准弹出窗口
2. cookie通知弹出窗口
3. 带有按钮的弹出消息
4. 不带按钮的弹出消息
5. 文本弹出窗口
6. 信息弹出窗口
7. 仅标题
8. 页眉+文本
9. 标题+文本+图像
10. 自定义内容

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

4.自定义弹出框的外观。

$('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.更多具有默认值的自定义选项。

$('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.手动显示/隐藏弹出窗口。“delay”参数是可选的。

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

7.事件处理程序。

$('body').cornerpopup({

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

});

更新日志：

2021-12-15

• 键盘可访问性改进

2020-12-24

• 修复了非工作按钮“目标”属性的错误

2020-09-27

• 修复了Safari上无法使用的按钮链接
• 改进了手机外观

2020-09-19

• 增加了在链接1和链接2中更改“目标”属性的功能

2020-03-11

• 增加了延迟和顶角选项。

2020-03-09

• 添加了新选项（padding、stickToBottom）和新事件（onBtClick）

2020-03-07

• 删除了导致loadContent选项出现故障的错误

2020-03-02

• 更正了以百分比为单位的宽度的列设置/较高宽度时的关闭按钮错误

2020-03-01

• 删除了宽度更改时列和按钮的错误
• 添加了带有延迟选项的新方法

2020-02-17

• 改进了与Bootstrap 4的兼容性

2019-07-26

• 添加了方法/事件，修复了位置错误：移动设备上的左/右

2019-07-15

• 已更正Escape按钮的问题

预览截图

多用途弹出框插件 jQuery角点弹出