<样式>
#form-gdpr-edit-account-request,
#form-gdpr-data-account-request,
#form-gdpr-personal-data-report-request,
#form-gdpr-delete-account-request {
显示:无;
}
#gdpr_page 按钮 {
背景色:透明;
边框:0;
边框底部:1px纯黑色;
填充:0px;
}
/* 模态背景 */
#数据验证背景{
显示:无;
位置:固定;
z-索引:1;
填充顶部:计算(50vh - 83px);
左:0;
顶部:0;
宽度:100%;
高度:100%;
溢出:自动;
背景颜色:RGB(0,0,0);
背景颜色:RGBA(0,0,0,0.4);
不透明度:未设置;
z-索引:9999;
}
/* 模态内容 */
#data-verification-modal {
背景颜色:#fefefe;
保证金:自动;
填充:16px;
边框:1px 实心 #888;
宽度:38%;
}
/* 模态关闭按钮 */
.数据验证关闭{
颜色:#aaaaaa;
浮动:对;
字体大小:28px;
字体粗细:粗体;
行高:17px;
}
.data-verification-close:hover,
.data-verification-close:focus {
颜色:#000;
文字装饰:无;
光标:指针;
}
/* 复选框文本 */
#数据验证容器p{
显示:内联块;
padding-left: 5px;
垂直对齐:顶部;
宽度:计算(100% - 45px);
光标:指针;
}
#data-verification-container a, #data-verification-container a:hover{
文字装饰:下划线!重要;
颜色:#4285f4;
}
/* 复选框图标 */
#数据验证图标{
光标:指针;
位置:相对;
保证金:自动;
宽度:18px;
高度:18px;
-webkit-tap-highlight-color:透明;
变换:translate3d(0, 0, 0);
边距顶部:2px;
}
#data-verification-icon:before {
内容: ””;
位置:绝对;
顶部:-7px;
左:-7px;
宽度:32px;
高度:32px;
边界半径:50%;
背景:RGBA(34,50,84,0.03);
不透明度:0;
过渡:不透明度 0.2s 缓和;
}
#data-verification-icon svg {
位置:相对;
z-索引:1;
填充:无;
笔画线帽:圆形;
笔画线连接:圆形;
中风:#c8ccd4;
笔画宽度:1.5;
变换:translate3d(0, 0, 0);
过渡:全0.2s缓动;
}
#data-verification-icon svg 路径 {
中风-dasharray:60;
中风-dashoffset:0;
}
#data-verification-icon svg 折线 {
中风-dasharray:22;
中风-dashoffset:66;
}
#data-verification-icon:hover:before {
不透明度:1;
}
#data-verification-container:hover #data-verification-icon svg {
中风:#4285f4;
}
#data-verification-icon.clicked svg {
中风:#4285f4;
}
#data-verification-icon.clicked svg 路径{
中风-dashoffset:60;
过渡:全0.3s线性;
}
#data-verification-icon.clicked svg 折线{
中风-dashoffset:42;
过渡:所有 0.2s 线性;
转换延迟:0.15s;
}
/* 加载元素 */
.loading {
显示:无;
顶部:50vh;
左:50vw;
位置:固定;
}
.loading:not(:required):after {
内容: '';
显示:块;
字体大小:10px;
宽度:1em;
高度:1em;
边距顶部:-0.5em;
-webkit-animation:微调器 1500ms 无限线性;
-moz-animation:微调器 1500ms 无限线性;
-ms-animation:微调器 1500ms 无限线性;
-o-animation:微调器 1500ms 无限线性;
动画:微调器 1500ms 无限线性;
边界半径:0.5em;
-webkit-box-shadow: rgba(255,255,255, 1) 1.5em 0 0 0, rgba(255,255,255, 1) 1.1em 1.1em 0 0, rgba(255,255,255, 1,5525rg)(1,5,5200) -1.1em 1.1em 0 0, rgba(255,255,255, 1) -1.5em 0 0 0, rgba(255,255,255, 1) -1.1em -1.1em 0 0, rgba(255,255,15,05) 0 em (255,255,255, 1) 1.1em -11em 0 0;
box-shadow: rgba(255,255,255, 1) 1.5em 0 0 0, rgba(255,255,255, 1) 1.1em 1.1em 0 0, rgba(255,255,255, 1) 0,5,5,1.5 em 0,5,1.5 1.5 1.1em 0 0, rgba(255,255,255, 1) -1.5em 0 0, rgba(255,255,255, 1) -1.1em -1.1em 0 0, rgba(255,255,255, 5,5rg, 20,5,5rg, 0 0, 5 rgba(255,255,5,5) 1) 1.1em -1.1em 0 0;
}
/* 移动分辨率的模态变化*/
@media only screen and (max-width: 600px) {
#data-verification-modal {
宽度:90%;
}
}
/* 动画片 */
@-webkit-keyframes 微调器 {
0% {
-webkit-transform:旋转(0度);
-moz-transform:旋转(0度);
-ms-transform:旋转(0度);
-o-变换:旋转(0度);
变换:旋转(0度);
}
100% {
-webkit-transform:旋转(360度);
-moz 变换:旋转(360 度);
-ms-transform:旋转(360度);
-o-变换:旋转(360度);
变换:旋转(360度);
}
}
@-moz-keyframes 微调器 {
0% {
-webkit-transform:旋转(0度);
-moz-transform:旋转(0度);
-ms-transform:旋转(0度);
-o-变换:旋转(0度);
变换:旋转(0度);
}
100% {
-webkit-transform:旋转(360度);
-moz 变换:旋转(360 度);
-ms-transform:旋转(360度);
-o-变换:旋转(360度);
变换:旋转(360度);
}
}
@-o-keyframes 微调器 {
0% {
-webkit-transform:旋转(0度);
-moz-transform:旋转(0度);
-ms-transform:旋转(0度);
-o-变换:旋转(0度);
变换:旋转(0度);
}
100% {
-webkit-transform:旋转(360度);
-moz 变换:旋转(360 度);
-ms-transform:旋转(360度);
-o-变换:旋转(360度);
变换:旋转(360度);
}
}
@关键帧微调器{
0% {
-webkit-transform:旋转(0度);
-moz-transform:旋转(0度);
-ms-transform:旋转(0度);
-o-变换:旋转(0度);
变换:旋转(0度);
}
100% {
-webkit-transform:旋转(360度);
-moz 变换:旋转(360 度);
-ms-transform:旋转(360度);
-o-变换:旋转(360度);
变换:旋转(360度);
}
}
<脚本>
var gdprSlideUpAll = 函数(){
$('#form-gdpr-edit-account-request').slideUp(100);
$('#form-gdpr-data-account-request').slideUp(100);
$('#form-gdpr-personal-data-report-request').slideUp(100);
$('#form-gdpr-delete-account-request').slideUp(100);
$('#gdpr_page button').attr("aria-expanded", "false");
};
var 电子邮件,类型,consentGiven = false;
var verifyModalContent = '
' ;
var gdprSendRequest = 函数(回调){
$.ajax({
url: 'https://www.cloudflare.com/cdn-cgi/trace',
方法:'获取',
成功:功能(响应){
如果(!resp.error){
让 ipInfo = resp;
让 ipRegex = /[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}/
让 ipAddress = ipInfo.match(ipRegex)[0];
$.ajax({
网址:'https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest',
方法:'POST',
数据: {
商店:Shopify。店铺,
电子邮件:电子邮件,
类型:类型,
请求源:1,
ipAddress: ipAddress,
同意给予:同意给予,
lang: Shopifylocale ? Shopify.locale : '',
gtranslateLang: isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : ''
},
成功:功能(响应){
如果(!resp.error){
gdprSlideUpAll();
alert('您的请求已成功提交。请检查您的电子邮件以获取更多信息。');
} 别的 {
警报(响应消息);
}
if (typeof callback == 'function') {
回调(响应);
}
}
});
} 别的 {
警报(响应消息);
}
}
});
}
$(document).ready(function() {
//将模态附加到body,否则它不会保持居中(即使位置是固定的)
$("body").append(verificationModalContent);
// 当用户点击
(x) 时,关闭模态
$('.data-verification-close:first').on('click', function(e) {
e.preventDefault();
closeVerificationModal();
});
$('#data-verification-icon, #data-verification-container p').on('click', function(e) {
e.preventDefault();
// 检测 href 的点击,因为它被覆盖了。
if($(e.target).is("a")) {
window.open(e.target.href, '_blank');
返回;
}
$('#data-verification-icon').addClass("点击");
设置超时(()=>{
$("#data-verification-modal").fadeOut();
$('#data-verification-background .loading').css('display', 'inline-block');
同意给定 = 真;
gdprSendRequest(函数(响应){
同意给定 = 假;
closeVerificationModal();
});
}, 400);
});
});
函数 openVerificationModal(){
$("#data-verification-modal").css("display", "block")
$('#data-verification-background').css("display", "block");
}
函数 closeVerificationModal(){
$('#data-verification-background').fadeOut();
$('#data-verification-icon').removeClass("点击");
$('#data-verification-background .loading').css('display', 'none');
}
$('#btn-gdpr-edit-account-request').on('click', function(e) {
e.preventDefault();
gdprSlideUpAll();
$('#form-gdpr-edit-account-request').slideDown(200);
$(this).attr("aria-expanded", "true");
});
$('#form-gdpr-edit-account-request 表单输入[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-gdpr-edit-account-request form input[name=email]').val();
type = '客户/编辑';
openVerificationModal();
});
$('#btn-gdpr-requests-request, #btn-gdpr-personal-information-request, #btn-gdpr-orders-request').on('click', function(e) {
e.preventDefault();
gdprSlideUpAll();
类型 = '';
switch($(this).attr('id')) {
案例'btn-gdpr-requests-request':
type = '客户/请求';
休息;
案例“btn-gdpr-个人信息请求”:
type = '客户/个人信息';
休息;
案例“btn-gdpr-orders-request”:
type = '客户/订单';
休息;
}
$('#form-gdpr-data-account-request form input[name="request_type"]').val(type);
$('#form-gdpr-data-account-request').slideDown(200);
$(this).attr("aria-expanded", "true");
});
$('#form-gdpr-data-account-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-gdpr-data-account-request form input[name=email]').val();
type = $('#form-gdpr-data-account-request form input[name="request_type"]')val();
openVerificationModal();
});
$('#btn-gdpr-personal-data-report-request').on('click', function(e) {
e.preventDefault();
gdprSlideUpAll();
$('#form-gdpr-personal-data-report-request').slideDown(200);
$(this).attr("aria-expanded", "true");
});
$('#form-gdpr-personal-data-report-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-gdpr-personal-data-report-request form input[name=email]').val();
type = '客户/报告';
openVerificationModal();
});
$('#btn-gdpr-delete-account-request').on('click', function(e) {
e.preventDefault();
gdprSlideUpAll();
$('#form-gdpr-delete-account-request').slideDown(200);
$(this).attr("aria-expanded", "true");
});
$('#form-gdpr-delete-account-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-gdpr-delete-account-request form input[name=email]').val();
type = '客户/删除';
openVerificationModal();
});
脚本>
.