html GDPR Cookie控件弹出窗口

Posted 2021-05-10

<style>

    /* Designer to change consent stuff here */
    #consentdirective {
        display: none;
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99999;
    }

    #consentdirective h3 {
        margin-bottom: 10px;
    }

    #consentdirective .consent-form-popup h3 {
        text-align: left;
    }

    #consentdirective .d-inline-block {
        display: inline-block;
    }

    #consentdirective .mt-2 {
        margin-top: 20px;
    }

    .consent-overlay {
        /*position: fixed;*/
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 999;
        width: 100%;
        height: 100%;
        display: none;
    }

    .consentdirective-content,
    .consent-form-popup {
        position: absolute;
        z-index: 1001;
        background-color: #f3f3f3;
        font-size: 14px;
        padding: 35px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 90%;
        max-width: 800px;
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 1px 5px 20px 0 rgba(0, 0, 0, 0.25);
        -webkit-overflow-scrolling: touch;
        border-radius: 15px;
    }



    .consentdirective-content p {
        margin-bottom: 0;
        text-align: center;
    }

    .consentdirective-content p a {
        color: #77bfff;
    }

    .consentdirective-content p a:hover,
    .consentdirective-content p a:focus {
        color: #60b4ff;
    }


    .consent-form-popup,
    .consentdirective-content {
        display: none;
        visibility: hidden;
    }

    .sliderWrapper {
        margin: 24px 24px 24px 24px;
        position: relative;
    }

    .sliderWrapper div {
        display: inline-block;
    }
    
    .switch {
        position: relative;
        display: block;
        padding: 0px;
        width: 54px;
        height: 28px;
        margin: 0 20px;
        border-radius: 34px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        background-color: #d7d7d7;
        overflow: hidden;
        box-sizing: border-box;

    }

    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }

    /* The slider */
    .chk-slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .4s;
        transition: .4s;
        margin-left: -26px;
        transform: translateX(-26px);
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        background-color: rgba(37, 195, 87, 0);

    }

    .chk-slider:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        right: 1px;
        bottom: 1px;
        background-color: #ffffff;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
        cursor: pointer;
    }

    input.privacy-switch:focus+.chk-slider {
        box-shadow: 0 0 1px #25c357;
    }

    input.privacy-switch:checked+.chk-slider,
    .switch.fixed .chk-slider {
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        background-color: rgba(37, 195, 87, 1);
    }

    input.privacy-switch:disabled+.chk-slider:before,
    input.privacy-switch:disabled:checked+.chk-slider:before,
    input.privacy-switch:disabled:focus+.chk-slider:before,
    .switch.fixed .chk-slider:before {
        /*background-color: #d7d7d7;*/
        opacity: 0.65;
        cursor: not-allowed;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
    }

    .text-left p {
        text-align: left;
    }

    .vertical-middle {
        vertical-align: middle;
    }

    table.cookie-control td {
        padding: 25px 5px;
    }

    table.cookie-control td p {
        margin: 0;
        padding: 0;
    }

    table.cookie-control {
        margin: 20px 0;
    }

    table.cookie-control tbody tr {
        border-bottom: 1px solid #e2e2e2;
    }

    table.cookie-control tbody tr:last-child {
        border-bottom: 0 none transparent;
    }

    .is-visible {
        display: block !important;
        visibility: visible !important;
    }

</style>

<div id="consentdirective" class="consentdirective">
<div class="consent-overlay"></div>

<div id="consent-form-popup" class="consent-form consent-form-popup">
    <div>
        <h2>Tracking and cookies</h2>
    </div>
    <table class="cookie-control">
        <tbody>
        <tr>
            <td class="vertical-middle">
                <label class="switch fixed">
                    <span class="chk-slider"></span>
                </label>
            </td>
            <td class="text-left">
                <h3>Necessary Cookies</h3>
                <p>These cookies are essential in order to enable you to move around the website and use its features. Without these cookies services you have asked for cannot be provided. For details how to disable these cookies please see our <a href="/cookies-policy">cookie policy</a></p>
            </td>
        </tr>

        <tr>
            <td class="vertical-middle">
                <label class="switch">
                    <input class="privacy-switch disallow-functional" data-val="true" id="disallow-functional-popup" name="disallow-functional-popup" type="checkbox" checked />
                    <span class="chk-slider"></span>
                </label>
            </td>
            <td class="text-left">
                <h3>Functional Cookies</h3>
                <p>These cookies allow the website to remember choices you make and provide enhanced functionality and personal features.</p>
            </td>
        </tr>

        <tr>
            <td class="vertical-middle">
                <label class="switch">
                    <input class="privacy-switch disallow-tracking" data-val="true" id="disallow-tracking-popup" name="disallow-tracking-popup" type="checkbox" checked />
                    <span class="chk-slider"></span>
                </label>
            </td>
            <td class="text-left">
                <h3>Tracking and Performance Cookies</h3>
                <p>We use tracking software to measure the performance of our website to help improve our services. This script and it's associated cookies help us to improve the performance of the website. For example, they collect information about which pages visitors go to most often and help us to provide a better user experience and fix errors.</p>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        <a href="javascript:void(0);" id="consent-save-button" class="button red">Save &amp; Continue to Site</a>
    </div>
</div>

<div id="consentdirective-content" class="consentdirective-content">
    <h3>We value your privacy</h3>
    <p>We use cookies to give you the best possible online experience. If you continue, we’ll assume you are happy for your web browser to receive all cookies from our website. For further information, see our <a aria-label="learn more about cookies" tabindex="0" href="/cookie-policy" target="_blank">Cookies Policy</a> for more information or to change your cookie preferences at any time.</p>


    <div>
        <a href="javascript:void(0);" id="consentall-button" class="d-inline-block button">Accept Defaults</a>
    </div>
    <div class="mt-2">
        <a href="javascript:void(0);" id="consent-review-button">Privacy Settings</a>
    </div>

</div>
</div>

<script>
//Elements
var consentDirective = document.getElementById("consentdirective");
var trackingCheckbox = document.getElementById("disallow-tracking-popup");
var functionalCheckbox = document.getElementById("disallow-functional-popup");
var consentFormPopup = document.getElementById("consent-form-popup");
var consentDirectiveContent = document.getElementById("consentdirective-content");

//Default Global Variables
var tagManagerFired = false;


function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
}

function preventDefaultForScrollKeys(e) {
    var keys = {
        37: 1,
        38: 1,
        39: 1,
        40: 1,
        32: 1,
        33: 1,
        34: 1,
        35: 1,
        36: 1
    };

    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
    if (window.addEventListener) // older FF
        window.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standard
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
    window.ontouchmove = preventDefault; // mobile
    document.onkeydown = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null;
    window.onwheel = null;
    window.ontouchmove = null;
    document.onkeydown = null;
}

//GDPR Cookie Consent Window

function getCookie(a) {
    var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
    return b ? b.pop() : "undefined";
}

function setDefaults() {

    //Cookie Values
    //var consentGiven = getCookie('consentgiven');
    var disallowFunctional = getCookie('disallowfunctional');
    var disallowTracking = getCookie('disallowtracking');

    //Set Boxes
    if (disallowTracking === "true") {
        if (trackingCheckbox!==null) {
            trackingCheckbox.checked = false;
        }
    }

    if (disallowFunctional === "true") {

        if (functionalCheckbox!==null) {
            functionalCheckbox.checked = false;
        }
        if (trackingCheckbox!==null) {
            trackingCheckbox.checked = false;
            trackingCheckbox.disabled = true;
        }
    }
}

function UpdateConsentCookies(disallowFunctional, disallowTracking) {
    document.cookie = "consentgiven=true; max-age=" + 60 * 60 * 24 * 365 + "; path=/"; // 365 days
    document.cookie = "disallowfunctional=" + disallowFunctional + "; max-age=" + 60 * 60 * 24 * 365 + "; path=/"; // 365 days
    document.cookie = "disallowtracking=" + disallowTracking + "; max-age=" + 60 * 60 * 24 * 365 + "; path=/"; // 365 days

    if (!disallowTracking) {
        FireTagManager();
    }
}

function FireTagManager() {
    if (!tagManagerFired) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'consent_given'
        });
        tagManagerFired = true;
    }
}

function openSettings() {
    consentDirective.classList.add('is-visible');
    consentDirectiveContent.classList.add('is-visible');
    disableScroll();
}

document.addEventListener("DOMContentLoaded", function(event) {

    // constent and cookies
    if (navigator.cookieEnabled) {
        if (/(^|;)\s*consentgiven=true/.test(document.cookie) || /(^|;)\s*consentgiven=false/.test(document.cookie)) {
            if (/(^|;)\s*disallowtracking=false/.test(document.cookie)) {
                FireTagManager();
            }
        } else {
            consentDirective.classList.add('is-visible');
            consentDirectiveContent.classList.add('is-visible');
            disableScroll();
        }
    }


    document.getElementById('consentall-button').onclick = function(e) {
        UpdateConsentCookies(false, false);
        consentDirective.classList.remove('is-visible');
        enableScroll();
        return false;
    };


    document.getElementById('consent-review-button').onclick = function(e) {
        setDefaults();
        consentFormPopup.classList.add('is-visible');
        consentDirectiveContent.classList.remove('is-visible');
    };


    document.getElementById('consent-save-button').onclick = function(e) {
        var disallowFunctional = null;
        var disallowTracking = null;

        if (functionalCheckbox!==null) {
            disallowFunctional = !functionalCheckbox.checked;
        }else{
            disallowFunctional = false;
        }

        if (trackingCheckbox!==null) {
            disallowTracking = trackingCheckbox.disabled || (!trackingCheckbox.disabled && !trackingCheckbox.checked);
        }else{
            disallowTracking = true;
        }

        UpdateConsentCookies(disallowFunctional, disallowTracking);
        consentDirective.classList.remove('is-visible');
        consentFormPopup.classList.remove('is-visible');
        consentDirectiveContent.classList.remove('is-visible');
        enableScroll();
    };

    if (functionalCheckbox!==null){
        functionalCheckbox.onclick = function(e) {

            var disallowFunctional = !this.checked;

            if (disallowFunctional === false) {

                functionalCheckbox.checked = true;
                //trackingCheckbox.checked = true;
                trackingCheckbox.disabled = false;
            } else {
                functionalCheckbox.checked = false;
                trackingCheckbox.checked = false;
                trackingCheckbox.disabled = true;
            }
        }
    }

    var cookieSettingsButtons = document.getElementsByClassName('--open-cookie-settings');
    Array.prototype.filter.call(cookieSettingsButtons, function(button) {
        button.onclick = function(e) {
            openSettings();
        };
    });
});