Skip to main content
1 de 2
Triby
  • 25.2k
  • 3
  • 18
  • 36

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>

Triby
  • 25.2k
  • 3
  • 18
  • 36