0

Holaa, estoy intentando hacer un button que cuando le de click aparezca un div con texto y cuando este se cierre se restablezca los el style de "display" a block para que así si vuelven a dar click, se les vuelva a mostrar el div. LLevo hecho esto, pero no funciona, muestra la propiedad del div en la consola pero poco más. HTML CODE:

 <div id="supra_grrr">
    <h3 class="grrr">  ¡Hola de nuevo <span class='value'></span>!     </h3>
    <div class="supra_grr">
    
    <p class="supra_grr_p">
   Hemos detectado que ya has completado nuestro formulario.
  <br>
  Por favor, sé paciente y estate pendiente al número que nos has dado<br>
  porque en breve nos pondremos en contacto contigo para finalizar la contratación!
    </p>
   <button id="fundacion">
   ¿Te has equivocado en algún dato?

    </button>

    <div class="gr" id="gr"> 
 <div class="close_d" id="close_d"> 
 <button class="none" id="close"><i class="fas fa-times"></i></button>
    <p> Uf, suele pasar, haz click en el siguiente botón para contactar con nosotros.</p>
    <button>
    <a href="https://www.wa.me/" target="_parent">Whatsapp</a>
    </button>
    </div>
    </div>
    </div>
    </div>

Javascript code:

    <script>
    
    var detected = localStorage.getItem('such');
    console.log(detected);
    if (detected <= 0){
        console.log('nothing to do here');
    }
    else{
        console.log('jisus'); 
    document.getElementById("supra_grrr").style.display = "block";
        document.getElementById("completed_form").style.display = "none";
    document.querySelector('.grrr .value').innerHTML = detected;
$(".grrr .value").html(detected);

}

    </script>
        <script>
    $("#fundacion").on('click', function () {
       // $(".gr").addClass("inutil");
       console.log('pressed');
        document.getElementById("gr").style.display = "block";

    });
    </script>

    <script>
    $("#close").on('click', function () {
       // $(".gr").addClass("inutil");
       console.log('pressed');
        document.getElementById("close_d").style.display = "none";

    });
    </script>
    <script>
    $("#fundacion").on('click', function () {
    var element = document.querySelector('#close_d');
   var tt =  element.computedStyleMap().get('display');
    console.log(element);

     
        

    
    if (tt === "none") {
    document.getElementById("gr").style.display = "block";
    console.log('changed');
}else{
    console.log('det');
}

  });  
    </script>

1 respuesta 1

1

En realidad no tenias que hacer todo el codigo final, solamente tenias que alternar el estilo por defecto que tiene el bloque, para ello es necesario que por defecto dejes el bloque en display: none; y cuando se le de el click al boton le cambie ese estilo por defecto a display: block

Le cambie un poco los estilos, espero te sirva !

$(document).ready(function () {
    $("#fundacion").on("click", function () {
        console.log('pressed');
        document.getElementById("gr").style.display = "block";
    });
    $("#close").on('click', function () {
        console.log('pressed');
        document.getElementById("gr").style.display = "none";
    });
});
* {
    font-family: "Montserrat", sans-serif;
}
body {
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    max-width: 100vw;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}
#supra_grrr {
    display: block;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .1);
    padding: 1rem 1rem 2rem 1rem;
    text-align: center;
    width: auto;
    max-width: 50%;
}
.supra_grrr-btn_group {
    display: block;
    text-align: right;
}
.supra_grrr-btn_group button {
    appearance: none;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
    border-style: none;
    border-width: 0;
    box-shadow: none;
    color: #000;
    font-size: 1rem;
    cursor: pointer;
}
#fundacion {
    display: inline-block;
    margin-top: 1rem;
    background-color: transparent;
    border: 1px solid #000;
    padding: 10px;
    transition: ease .3s all;
}
#fundacion:hover {
    background-color: #000;
    color: #fff;
    cursor: pointer;
}
.whatsapp {
    font-size: 2rem;
    color: #25d366;
    transition: ease .3s all;
}
.whatsapp:hover {
    font-size: 2.5rem;
}
<script src='https://kit.fontawesome.com/25f07c253e.js'></script>
<script src='https://code.jquery.com/jquery-3.4.0.min.js'></script>
<div id="supra_grrr">
    <h3 class="grrr"> ¡Hola de nuevo <span class='value'></span>! </h3>
    <div class="supra_grr">
        <p class="supra_grr_p">Hemos detectado que ya has completado nuestro formulario. Por favor, sé paciente y estate pendiente al número que nos has dado porque en breve nos pondremos en contacto contigo para finalizar la contratación!</p> <a id="fundacion">¿Te has equivocado en algún dato?</a>
        <div class="gr" id="gr" style="display: none;">
            <div class="supra_grrr-btn_group">
                <button class="none supra_grrr--button" id="close"><i class="fas fa-times"></i>
                </button>
            </div>
            <p>Uf, suele pasar, haz click en el siguiente botón para contactar con nosotros.</p> <a class="whatsapp" href="https://www.wa.me/" target="_blank"><i class="fab fa-whatsapp"></i></a>
        </div>
    </div>
</div>

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.