<στυλ>
#form-gdpr-edit-account-request,
#form-gdpr-data-account-request,
#form-gdpr-personal-data-report-request,
#form-gdpr-delete-account-request {
οθόνη: καμία;
}
#gdpr_page button {
Χρώμα φόντου: διαφανές.
περίγραμμα: 0;
περίγραμμα-κάτω: 1px συμπαγές μαύρο;
padding: 0px;
}
/* Modal background */
#data-verification-background {
οθόνη: καμία;
θέση: σταθερή;
z-index: 1;
padding-top: calc(50vh - 83px);
αριστερά: 0;
κορυφή: 0;
πλάτος: 100%;
ύψος: 100%;
υπερχείλιση: αυτόματη;
χρώμα φόντου: rgb(0,0,0);
χρώμα φόντου: rgba(0,0,0,0.4);
αδιαφάνεια: unset;
z-index: 9999;
}
/* Τροπικό περιεχόμενο */
#data-verification-modal {
φόντο-χρώμα: #fefefe;
περιθώριο: αυτόματο;
padding: 16px;
περίγραμμα: 1px στερεό #888;
πλάτος: 38%;
}
/* Κουμπί Modal Close */
.data-verification-close {
χρώμα: #aaaaaa;
float: δεξιά;
μέγεθος γραμματοσειράς: 28 px;
βάρος γραμματοσειράς: έντονη γραφή;
Ύψος γραμμής: 17 px;
}
.data-verification-close:hover,
.data-verification-close:focus {
χρώμα: #000;
κείμενο-διακόσμηση: κανένα;
δρομέας: δείκτης;
}
/* Κείμενο πλαισίου ελέγχου */
#data-verification-container p{
οθόνη: inline-block;
padding-αριστερά: 5px;
κατακόρυφη ευθυγράμμιση: επάνω;
πλάτος: υπολογισμός (100% - 45 px);
δρομέας: δείκτης;
}
#data-verification-container a, #data-verification-container a:hover{
κείμενο-διακόσμηση: υπογράμμιση!σημαντικό;
χρώμα: #4285f4;
}
/* Εικονίδιο πλαισίου ελέγχου */
#data-verification-icon {
δρομέας: δείκτης;
θέση: σχετική;
περιθώριο: αυτόματο;
πλάτος: 18 px;
ύψος: 18 px;
-webkit-tap-highlight-color: διαφανές.
transform: translate3d(0, 0, 0);
margin-top: 2px;
}
#data-verification-icon:before {
περιεχόμενο: "";
θέση: απόλυτη;
κορυφή: -7 px;
αριστερά: -7px;
πλάτος: 32 px;
ύψος: 32px;
ακτίνα συνόρων: 50%;
φόντο: rgba(34,50,84,0.03);
αδιαφάνεια: 0;
μετάβαση: αδιαφάνεια 0,2 δευτ. ευκολία.
}
#data-verification-icon svg {
θέση: σχετική;
z-index: 1;
γέμισμα: κανένας;
stroke-linecap: στρογγυλό;
stroke-linejoin: στρογγυλό;
εγκεφαλικό επεισόδιο: #c8ccd4;
πλάτος διαδρομής: 1,5;
transform: translate3d(0, 0, 0);
μετάβαση: όλα τα 0,2s ευκολία?
}
#data-verification-icon διαδρομή svg {
stroke-dasharray: 60;
stroke-dashoffset: 0;
}
#data-verification-icon svg polyline {
stroke-dasharray: 22;
stroke-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 path {
stroke-dashoffset: 60;
μετάβαση: όλα τα 0,3 s γραμμικά.
}
#data-verification-icon.clicked svg polyline {
stroke-dashoffset: 42;
μετάβαση: όλα τα 0,2 s γραμμικά.
μετάβαση-καθυστέρηση: 0,15s;
}
/* Φόρτωση στοιχείου */
.φόρτωση {
οθόνη: καμία;
κορυφή: 50vh;
αριστερά:50vw;
θέση: σταθερή;
}
.loading:not(:required):after {
περιεχόμενο: '';
οθόνη: μπλοκ;
μέγεθος γραμματοσειράς: 10 px;
πλάτος: 1em;
ύψος: 1em;
margin-top: -0,5em;
-webkit-animation: spinner 1500ms άπειρη γραμμική.
-moz-animation: spinner 1500ms άπειρο γραμμικό.
-ms-animation: spinner 1500ms άπειρο γραμμικό.
-o-animation: spinner 1500ms άπειρο γραμμικό.
animation: spinner 1500ms infinite linear?
ακτίνα συνόρων: 0,5 εκ.
-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, 15,5,2,5,5,5,5,5,5,5, rgba(255,255,255, 15,51 -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,250,250, rgba) (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 1,251,51 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,255, 1) 0 -1,5em 0 0, RGBA (255,255,255, RGBA (255,255,255, 1) 1.1em -1.1em 0 0;
}
/* Τροπικές αλλαγές στην ανάλυση κινητών*/
οθόνη @media μόνο και (μέγιστο πλάτος: 600 pixel) {
#data-verification-modal {
πλάτος: 90%;
}
}
/* Κινουμένων σχεδίων */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate (360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate (360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate (360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate (360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
<σενάριο>
var gdprSlideUpAll = function() {
$('#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 email, type, consentGiven = false;
var verificationModalContent = '
' ;
var gdprSendRequest = συνάρτηση(ανάκληση) {
$.ajax({
url: 'https://www.cloudflare.com/cdn-cgi/trace',
μέθοδος: "GET",
επιτυχία: function(resp) {
αν (!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({
url: 'https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest',
μέθοδος: 'ΑΝΑΡΤΗΣΗ',
δεδομένα: {
κατάστημα: Shopify.κατάστημα,
email: email,
τύπος: τύπος,
πηγήΑίτησης: 1,
ipAddress: ipAddress,
consentGiven: consentGiven,
γλώσσα: Shopifylocale ; Shopify.locale : '',
gtranslateLang: isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : ''
},
επιτυχία: function(resp) {
αν (!resp.error) {
gdprSlideUpAll();
alert('Το αίτημά σας υποβλήθηκε με επιτυχία. Ελέγξτε το email σας για περισσότερες πληροφορίες.');
} αλλο {
alert(resp.message);
}
εάν (τύπος επανάκλησης == 'λειτουργία') {
επανάκληση (resp);
}
}
});
} αλλο {
alert(resp.message);
}
}
});
}
$(document).ready(function() {
//Προσθήκη modal στο σώμα, γιατί διαφορετικά δεν θα παραμείνει στο κέντρο (ακόμη και αν η θέση είναι σταθερή)
$("body").append(verificationModalContent);
// Όταν ο χρήστης κάνει κλικ στο
(x), κλείστε το modal
$('.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("κλικ");
setTimeout(()=>{
$("#data-verification-modal").fadeOut();
$('#data-verification-background .loading').css('display', 'inline-block');
συναίνεσηΔεδομένη = αληθής;
gdprSendRequest(function(resp) {
consentGiven = ψευδής;
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 form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-gdpr-edit-account- request input for form[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-personal-information-request':
type = 'customer/personal_info';
Διακοπή;
περίπτωση '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-αίτημα φόρμας εισαγωγής[όνομα=email]').val();
type = $('#form-gdpr-data-account-αίτημα φόρμας εισαγωγής[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 for 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 input for form[name=email]').val();
type = 'πελάτης/διαγραφή';
openVerificationModal();
});
.
