0

Tengo un navbar ubicado en el pie de pagina de mi desarrollo el cual contiene un aviso para uso de cookies con dos botones, el primer botón Aceptar cierra el navbar y se crea una cookie y el segundo botón Revisar abre una ventana modal.

La ventana modal también contiene un botón Aceptar pero al momento de darle en este botón solo se cierra el modal. Quisiera que al dar click en el botón Aceptar de la ventana modal se cierre el modal junto con el navbar y pues que de igual modo como se cierra el navbar se cree la cookie.

El siguiente es el código de mi navbar:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="cookie_consent_user_accepted" class="alert alert-infoCookie alert-dismissible fade in navbar-fixed-bottom hide" role="alert" style="margin-bottom: -1px; font-family: Lettera Text Std;">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>     
            <div class="col-md-10 col-sm-8 col-xs-12">
                <h4>Titulo del aviso</h4>
                <p>Aquí va el contenido del aviso </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-12" style="display: grid;">
                <button type="button" class="btn btn-success-cookie" data-dismiss="alert">Aceptar</button>
                <br/>
                <button type="button" class="btn btn-success-cookie" data-toggle="modal" data-target="#myModal">Revisar</button>
            </div>
    </div>

El siguiente es el código de mi ventana modal que se abre al dar click en el botón Revisar de mi navbar:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="font-family: Lettera Text Std; font-size: 12px;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModal-label"><strong>Ventana modal</strong></h4>
                </div>
                <div class="modal-body">
                  Aqui va el contenido de mi modal
                </div>
                <div id="cookie_consent_user_accepted" class="modal-footer">
                    <button type="button" class="btn btn-success-cookie" data-dismiss="alert">Aceptar</button>
                </div>
            </div>
        </div>
    </div>

Aquí mi codigo Javascript con el cual manejo el evento de cerrar el navbar y que se cree la cookie

if (!getCookie("cookie_consent_user_accepted")) {
    $("#cookie_consent_user_accepted").removeClass("hide")
}

// Hide if cookie is active
$("#cookie_consent_user_accepted").on("closed.bs.alert", function () {
    $("#cookie_consent_user_accepted").addClass("hide")
    setCookie("cookie_consent_user_accepted", true, 1)
    return false
});

// Create cookie
function setCookie(name, value, days) {
    if (days) {
        var date = new Date()
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
        var expires = "; expires=" + date.toGMTString()
    } else var expires = ""
    document.cookie = name + "=" + value + expires + "; path=/"
}

// Get cookie value
function getCookie(name) {
    var nameEQ = name + "="
    var ca = document.cookie.split(";")
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i]
        while (c.charAt(0) == " ") c = c.substring(1, c.length)
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length)
    }
    return null
}

// Delete the cookie
function eraseCookie(name) {
    setCookie(name, "", -1)
}

Actualización:

Siguiendo alguna de las respuestas aquí estoy obteniendo el siguiente error en la consola del navegador al momento de dar click en Aceptar en la ventana modal:

introducir la descripción de la imagen aquí

3
  • Has tratado de añadir la clase hide a ambos elementos que quieres ocultar?
    – Christian
    Commented el 26 mar. 2021 a las 16:16
  • @christian Te refieres a la clase hide que contiene el navbar al comienzo del código ?
    – John Doe
    Commented el 26 mar. 2021 a las 16:42
  • @christian Realice la prueba colocando la clase hide en el modal y ahora ya no se abre al seleccionar el boton Revisar
    – John Doe
    Commented el 26 mar. 2021 a las 16:56

1 respuesta 1

2

Estás asignando el ID cookie_consent_user_accepted tanto al nav como al pie de la ventana modal. Recuerda que los ID deben ser únicos:

El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).
Referencia: https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/id

Para el pie de la ventana modal deja solo <div class="modal-footer">.

No sé si puedes agregar múltiples elementos en data-dismiss, pero puedes asignar un evento al botón para cerrar el nav, sin afectar el comportamiento normal de cerrar la ventana modal: data-dismiss="modal".

SO no permite el uso de cookies en fragmentos de código, por lo que tuve que comentar algunas líneas para que pueda funcionar aquí.

// En fragmento de código no se permite el uso de cookies
// let cookieAccepted = getCookie("cookie_consent_user_accepted");
// Por defecto, será falso. Elimina estas dos líneas y descomenta la anterior
let cookieAccepted = false;

if (cookieAccepted) {
    // Ocultar si ya se aceptaron condiciones y existe la cookie
    $("#cookie_consent_user_accepted").addClass('hide');
}

// Hide if cookie is active
$("#cookie_consent_user_accepted").on("closed.bs.alert", function () {
    $("#cookie_consent_user_accepted").addClass("hide");
    // Descomenta la siguiente línea
    // setCookie("cookie_consent_user_accepted", true, 1);
    return false
});

// Asignar evento al botón "Aceptar"
$('.modal-footer button').on('click', () => {
    $("#cookie_consent_user_accepted").addClass("hide");
    // Descomenta la siguiente línea para guardar la cookie
    // setCookie("cookie_consent_user_accepted", true, 1);
});

// Create cookie
function setCookie(name, value, days) {
    if (days) {
        var date = new Date()
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
        var expires = "; expires=" + date.toGMTString()
    } else var expires = ""
    document.cookie = name + "=" + value + expires + "; path=/"
}

// Get cookie value
function getCookie(name) {
    var nameEQ = name + "="
    var ca = document.cookie.split(";")
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i]
        while (c.charAt(0) == " ") c = c.substring(1, c.length)
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length)
    }
    return null
}

// Delete the cookie
function eraseCookie(name) {
    setCookie(name, "", -1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="font-family: Lettera Text Std; font-size: 12px;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModal-label"><strong>Ventana modal</strong></h4>
            </div>
            <div class="modal-body">
              Aqui va el contenido de mi modal
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success-cookie" data-dismiss="modal">Aceptar</button>
            </div>
        </div>
    </div>
</div>

<div id="cookie_consent_user_accepted" class="alert alert-infoCookie alert-dismissible fade in navbar-fixed-bottom" role="alert" style="margin-bottom: -1px; font-family: Lettera Text Std;">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>     
            <div class="col-md-10 col-sm-8 col-xs-12">
                <h4>Titulo del aviso</h4>
                <p>Aquí va el contenido del aviso </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-12" style="display: grid;">
                <button type="button" class="btn btn-success-cookie" data-dismiss="alert">Aceptar</button>
                <br/>
                <button type="button" class="btn btn-success-cookie" data-toggle="modal" data-target="#myModal">Revisar</button>
            </div>
    </div>

Actualización:

En tu código debes eliminar la línea que asigna cookieAccepted, dejando solo la que trata de leer la cookie, eliminando las // para que no sea comentario:

let cookieAccepted = getCookie("cookie_consent_user_accepted");

Elimina estas dos líneas:

// Por defecto, será falso. Elimina estas dos líneas y descomenta la anterior
let cookieAccepted = false;
7
  • Hola, gracias por tu respuesta pero al parecer no funciono, ahora ya no me muestra mi navbar cuando ingreso a la pagina, igual verifique si la cookie estaba creada y no lo esta
    – John Doe
    Commented el 26 mar. 2021 a las 18:32
  • Tendrás algún error en la validación de si existe o no la cookie ?
    – John Doe
    Commented el 26 mar. 2021 a las 18:35
  • Probablemente tienes todavía la clase hide. No realicé validaciones, solo usé tu código tal como lo tienes, comentando la parte de las cookies para que pueda funcionar el fragmento de código.
    – Triby
    Commented el 26 mar. 2021 a las 18:36
  • Modificaste algo en el html, para el modal como mencionas solo deje <div class="modal-footer"> ?
    – John Doe
    Commented el 26 mar. 2021 a las 18:40
  • Ya revise y tenia la clase hide en el navbar, disculpa
    – John Doe
    Commented el 26 mar. 2021 a las 18:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.