最新资源
简介
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.指定要使用的弹出窗口类型。所有可能的变体：
- 标准弹出窗口
- cookie通知弹出窗口
- 带有按钮的弹出消息
- 不带按钮的弹出消息
- 文本弹出窗口
- 信息弹出窗口
- 仅标题
- 页眉+文本
- 标题+文本+图像
- 自定义内容
- $('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角点弹出