Ley de Protección de Datos del 2020, usando JavaScript, CSS y Bootstrap.

Adapta tu web a la nueva Ley de Protección de Datos del 2020, usando JavaScript, CSS y Bootstrap.

by José Luis Rojo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- lopdgdd -->
    <div id="lopdgddd">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-12 info">
                    <p>Utilizamos cookies propias para analizar nuestros servicios y de terceros para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Puedes obtener más información y configurar tus preferencias en "Configuración" y + "Info".</p>
                </div>
                <div class="col-md-4 col-sm-12 buttons">
                    <div class="buttons">
                        <a href="" class="btn-accept">Aceptar</a>
                        <a href="" class="btn-conf" data-toggle="modal" data-target=".lopdgddd-modal">Configuración</a>
                        <a href="politica-de-privacidad.html" class="btn-info">+info</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- lopdgdd modal -->
    <div id="lopdgddd-modal" class="modal fade lopdgddd-modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <button type="button" class="close btn-close" data-dismiss="modal">&times;</button>
                <h3>Configuración de cookies</h3>
                <div class="content">
                    <p>En <strong>empresa</strong> usamos dos tipos de cookies. Las cookies requeridas y las cookies analíticas.</p>
                    <p>Las <strong>cookies requeridas</strong> facilitan la navegación...

CSS

#lopdgddd {
    position: fixed;
    padding: 10px 0 20px;
    z-index: 1;
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    background-color: #fdffde;
    display: none; /* default hide div */
}
#lopdgddd .buttons { clear:both; padding: 5px 0; }
#lopdgddd .buttons a { padding: 10px; text-decoration: none; }
#lopdgddd .btn-accept { background: #219234; color: #fff;  }
#lopdgddd .btn-conf { background: #4783a7; color: #fff; }
#lopdgddd .btn-info { background: #219234; color: #fff; }
#lopdgddd-modal .modal-content { padding: 15px; }
#lopdgddd-modal .modal-content .content { background: #eee; padding: 10px; margin: 10px 0; }
#lopdgddd-modal .modal-content .buttons { clear:both; height:auto; overflow: hidden; padding: 10px 0; }
#lopdgddd-modal .modal-content .buttons a { text-decoration: none; }
#lopdgddd-modal .modal-content .btn-close { float: right; position: absolute; right: 25px; top: 15px; font-size: 2rem; }
#lopdgddd-modal .modal-content .btn-accept { background: #219234; color: #fff; padding: 25px; }
#lopdgddd-modal .modal-content .btn-denied { background: #4783a7; color: #fff; padding: 25px; }

@media screen and (max-width: 992px) {

    #lopdgddd { font-size: 1rem; }
    #lopdgddd .info { font-size: 0.8rem }
    #lopdgddd .buttons { padding: 0px 0 0 5px; }
    #lopdgddd-modal .modal-content .buttons a { display: flex; padding: 10px 10px 10px; margin: 0 0 5px; }

}

JavaScript

/**
 * LOPDGDD Cookies
 * Author: José Luis Rojo Sánchez
 * Email: jose@artegrafico.net
 */

window.addEventListener('load', () => {

    // hide lopdgdd bar
    function hideLopdgdd() {
        localStorage.setItem("lopdgdd_bar", 0); // denied Cookies
        lopdgddBar.style.display = "none"; // hide bar
        lopdgddModal = document.querySelector("#lopdgddd-modal")
        if (lopdgddModal) {
            if (lopdgddModal.classList.contains("show")) {
                console.log("existe")
                document.querySelector("#lopdgddd-modal").style.display = "none" // hide modal
                document.querySelector(".modal-backdrop").classList.remove('show') // hide backdrop bootstrap
            }
        }
    }

    // debug mode for show cookies values
    function debug() {
        localStorage.setItem("lopdgdd_bar", 1); // denied Cookies
        console.log("lopdgdd bar: "+localStorage.getItem("lopdgdd_bar"))
        console.log("lopdgdd cookies: "+localStorage.getItem("lopdgdd_cookies"))
    }
    //debug()

    let lopdgddBar = document.querySelector("#lopdgddd");
    (localStorage.getItem("lopdgdd_bar") == 0) ? lopdgddBar.style.display = "none" : lopdgddBar.style.display = "block";

    // Accept Btn
    let lopdgdddAccept = document.querySelector('#lopdgddd .btn-accept');
    lopdgdddAccept.addEventListener('click', (evt) => {
        evt.preventDefault();
        localStorage.setItem("lopdgdd_cookies", 1); // accept Cookies
        lopdgddBar.style.display = "none"; // hide bar
        hideLopdgdd()
    })

    // Accept Modal Btn
    let lopdgdddModalAccept = document.querySelector('#lopdgddd-modal .btn-accept');
    lopdgdddModalAccept.addEventListener('click', (evt) => {
        evt.preventDefault();
        localStorage.setItem("lopdgdd_cookies", 1); // accept Cookies
        hideLopdgdd()
    })

    // Denied Button
    let lopdgddDenied = document.querySelector('#lopdgddd-modal .btn-denied')
    lopdgddDenied.addEventListener('click',...