<スタイル>
#form-ccpa-edit-account-request,
#フォーム-ccpa-データアカウントリクエスト,
#form-ccpa-個人データレポートリクエスト、
#form-ccpa-delete-account-request {
表示: なし。
}
/* モーダル背景 */
#データ検証の背景 {
表示: なし。
位置: 固定;
z インデックス: 1;
パディングトップ: calc(50vh - 83px);
左: 0;
トップ: 0;
幅: 100%;
高さ: 100%;
オーバーフロー: 自動;
背景色: rgb(0,0,0);
背景色: rgba(0,0,0,0.4);
不透明度: 設定解除;
z インデックス: 9999;
}
/* モーダルコンテンツ */
#データ検証モーダル {
背景色: #fefefe;
マージン: 自動;
パディング: 16px;
ボーダー: 1px ソリッド #888;
幅: 38%;
}
/* モーダル閉じるボタン */
.data-verification-close {
色: #aaaaaa;
フロート: 右;
フォントサイズ: 28px;
フォントの太さ: 太字;
行の高さ: 17px;
}
.data-verification-close:hover、
.data-verification-close:focus {
色: #000;
テキスト装飾: なし。
カーソル: ポインタ;
}
/* チェックボックスのテキスト */
#データ検証コンテナp{
表示: インラインブロック;
パディング左: 5px;
垂直配置: 上;
幅: calc(100% - 45px);
カーソル: ポインタ;
}
#data-verification-container a, #data-verification-container a:hover{
テキスト装飾: 下線!重要;
色: #4285f4;
}
/* チェックボックス アイコン */
#データ検証アイコン {
カーソル: ポインタ;
位置: 相対的;
マージン: 自動;
幅: 18px;
高さ: 18px;
-webkit-tap-highlight-color: 透明;
変換：translate3d(0, 0, 0);
マージントップ: 2px;
}
#データ検証アイコン:前 {
コンテンツ： "";
位置: 絶対;
上: -7px;
左: -7px;
幅: 32ピクセル;
高さ: 32ピクセル;
境界半径: 50%;
背景: rgba(34,50,84,0.03);
不透明度: 0;
トランジション: 不透明度 0.2 秒の緩和。
}
#データ検証アイコン svg {
位置: 相対的;
z インデックス: 1;
塗りつぶし: なし。
ストロークラインキャップ: 丸;
ストロークライン結合: 丸;
ストローク: #c8ccd4;
ストローク幅: 1.5;
変換：translate3d(0, 0, 0);
トランジション: すべて 0.2 秒の緩和。
}
#data-verification-icon svg パス {
ストローク-ダシャーレー: 60;
ストロークダッシュオフセット: 0;
}
#data-verification-icon svg ポリライン {
ストローク-ダシャーレー: 22;
ストローク-ダッシュオフセット: 66;
}
#データ検証アイコン:ホバー:前 {
不透明度: 1;
}
#データ検証コンテナ:ホバー #データ検証アイコン svg {
ストローク: #4285f4;
}
#data-verification-icon.clicked svg {
ストローク: #4285f4;
}
#data-verification-icon.clicked SVG パス {
ストローク-ダッシュオフセット: 60;
トランジション: すべて 0.3 秒の直線的。
}
#data-verification-icon.clicked SVG ポリライン {
ストロークダッシュオフセット: 42;
トランジション: すべて 0.2 秒の直線的。
遷移遅延: 0.15 秒;
}
/* モバイル解像度でのモーダル変更*/
@media のみの画面と (最大幅: 600px) {
#データ検証モーダル {
幅: 90%;
}
}
/* 要素の読み込み */
.loading {
表示: なし。
トップ:50vh;
左:50vw;
位置:固定;
}
.loading:not(:required):after {
コンテンツ： '';
表示ブロック;
フォントサイズ: 10px;
幅: 1em;
高さ: 1em;
マージントップ: -0.5em;
-webkit-animation: スピナー 1500ms 無限リニア;
-moz-animation: スピナー 1500ms 無限リニア;
-ms-animation: スピナー 1500ms 無限リニア;
-o-アニメーション: スピナー 1500ms 無限リニア;
アニメーション: スピナー 1500 ミリ秒の無限リニア。
境界半径: 0.5em;
-webkit-box-shadow：rgba（255,255,255、1）1.5em0 0、rgba（255,255,255、1）1.1em 1.1em 0 0、rgba（255,255,255、1）0 1.5em 0、rgba（255,255,255、1） -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,255, 1) 0 -1.5em 0 0、rgba (255,255,255, 1) 1.1em -1.1em 0 0;
Box -Shadow：RGBA（255,255,255、1）1.5EM 0 0、RGBA（255,255,255、1）1.1EM 1.1EM 0、RGBA（255,255,255、1）0 1.5EM 0、RGBA（255,2555,255、1）-1.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,255, 1) 0 -1.5em 0 0、rgba(255,255,255, 1) 1.1em -1.1em 0 0;
}
/* アニメーション */
@-webkit-keyframes スピナー {
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
@-moz-keyframes スピナー {
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
@-o-keyframes スピナー {
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
@キーフレームスピナー{
0% {
-webkit-transform: 回転(0度);
-moz-transform: 回転(0度);
-ms-transform: 回転(0度);
-o-transform: 回転(0度);
変換: 回転(0度);
}
100% {
-webkit-transform: 回転(360度);
-moz-transform: 回転(360度);
-ms-transform: 回転(360度);
-o-transform: 回転(360度);
変換: 回転(360度);
}
}
<スクリプト>
var ccpaSlideUpAll = function() {
$('#form-ccpa-edit-account-request').slideUp(100);
$('#form-ccpa-data-account-request').slideUp(100);
$('#form-ccpa-personal-data-report-request').slideUp(100);
$('#form-ccpa-delete-account-request').slideUp(100);
};
var email、type、consentGiven = false;
var verifyModalContent = '
×
私はこのリクエストを処理する目的で私の電子メールと IP アドレスを収集することに同意します。詳細については、プライバシー ポリシーをご覧ください。
';
var ccpaSendRequest = 関数(コールバック) {
$.ajax({
URL: 'https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest',
メソッド: 'POST'、
データ： {
ショップ: Shopify.shop、
電子メール: 電子メール、
タイプ: タイプ、
同意が与えられた: 同意が与えられ、
言語: Shopify.locale ? Shopify.locale : '',
gtranslateLang: isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : ''
}、
成功: function(resp) {
if (!resp.error) {
ccpaSlideUpAll();
alert('リクエストは正常に送信されました。詳細については、メールを確認してください。');
} それ以外 {
アラート(それぞれメッセージ);
}
if (コールバックの種類 == '関数') {
コールバック(それぞれ);
}
}
});
};
$(document).ready(function() {
//ボディにモーダルを追加します。そうしないと（位置が固定されていても）中央に留まらないからです。
$("body").append(verificationModalContent);
// ユーザーが (x) をクリックすると、モーダルが閉じます
$('.data-verification-close:first').on('click', function(e) {
e.preventDefault();
closeVerificationModal();
});
$('#データ検証アイコン, #データ検証コンテナ p').on('クリック', function(e) {
e.preventDefault();
// href は上書きされるため、クリックを検出します。
if($(e.target).is("a")) {
window.open(e.target.href, '_blank');
戻る;
}
$('#data-verification-icon').addClass("clicked");
setTimeout(()=>{
$("#データ検証モーダル").fadeOut();
$('#data-verification-background .loading').css('display', 'inline-block');
同意が与えられた = true;
ccpaSendRequest(関数(応答) {
同意が与えられた = false;
closeVerificationModal();
});
}, 400);
});
});
関数 openVerificationModal(){
$("#データ検証モーダル").css("表示", "ブロック")
$('#data-verification-background').css("表示", "ブロック");
}
関数 closeVerificationModal(){
$('#データ検証の背景').fadeOut();
$('#data-verification-icon').removeClass("clicked");
$('#data-verification-background .loading').css('display', 'none');
}
$('#btn-ccpa-edit-account-request').on('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
$('#form-ccpa-edit-account-request').slideDown(200);
});
$('#form-ccpa-edit-account-request フォーム入力[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-edit-account-request form input[name=email]').val();
type = '顧客/編集';
openVerificationModal();
});
$('#btn-ccpa-requests-request, #btn-ccpa-個人情報-request, #btn-ccpa-orders-request').on('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
タイプ = '';
switch($(this).attr('id')) {
ケース「btn-ccpa-requests-request」:
type = '顧客/リクエスト';
壊す;
ケース「btn-ccpa-個人情報リクエスト」:
type = '顧客/個人情報';
壊す;
ケース「btn-ccpa-orders-request」:
type = '顧客/注文';
壊す;
}
$('#form-ccpa-data-account-request フォーム入力[name="request_type"]').val(type);
$('#form-ccpa-data-account-request').slideDown(200);
});
$('#form-ccpa-data-account-request form input[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-data-account-request form input[name=email]').val();
type = $('#form-ccpa-data-account-request フォーム入力[name="request_type"]').val();
openVerificationModal();
});
$('#btn-ccpa-個人データレポート要求').on('クリック', function(e) {
e.preventDefault();
ccpaSlideUpAll();
$('#form-ccpa-個人データレポート要求').slideDown(200);
});
$('#form-ccpa-個人データレポート要求フォーム入力[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-personal-data-report-request form input[name=email]').val();
type = '顧客/レポート';
openVerificationModal();
});
$('#btn-ccpa-アカウント削除要求').on('クリック', function(e) {
e.preventDefault();
ccpaSlideUpAll();
$('#form-ccpa-delete-account-request').slideDown(200);
});
$('#form-ccpa-アカウント削除リクエストフォーム入力[type=submit]').on('click', function(e) {
e.preventDefault();
email = $('#form-ccpa-delete-account-request form input[name=email]').val();
type = '顧客/削除';
openVerificationModal();
});
Subscribe to our newsletter
A short sentence describing what someone will receive by subscribing
100% free, Unsubscribe any time!
Livraison Sécurisée
Livraison Gratuite à partir de 50€ d'achats
Satisfait ou Remboursé
Retours sous 14j, satisfaction garantie.
Nous sommes à votre écoute
Nous sommes disponibles du lundi au vendredi pour répondre à vos questions.
Paiements Sécurisés
Vos informations de paiement sont traitées en toute sécurité.
