0

Mi problema es que tengo un popup con un botón y quiero mostrar un texto que está dentro de un div pero al clickearlo no muestra nada. En resumen éste es el código que tengo hasta el momento porque si lo motrara todo sería muy extenso. Gracias.

HTML

<form>
    <input type="button" onclick="mostrar()" class="add-to-cart" value="Añadir a compra" />

    </form>
    <div id="alerta">
        <p>Su articulo se ha anadido</p>
    </div>

CSS

#alerta{
    margin-top:1 0px;
    display: none;
}

#alerta p{
    color: mediumseagreen;
}

Script

function mostrar() {
    var x = document.getElementById('alerta');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
1
  • para que .style te regrese un valor este tuvo que haber sido seteado anteriormente de forma dinámica, usando el mismo objeto que te regresa getElementById() para valores iniciales desde un archivo css tienes que usar window.getComputedStyle(x).display
    – Yikarus
    Commented el 22 nov. 2017 a las 18:04

5 respuestas 5

1

te muestro un código que permite mostrar una alerta creada con CSS, utilizando una función de JavaScript, en el código explico a grandes rasgos de que se trata cada fragmento:

// Cuando el usuario cliclea el <div>, el popup se abre
function mostrarMensaje() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}
/* Contenedor del popup */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* pop-up actual */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Muestra del Pop-up*/
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Cambio para mostrar/ocultar el contenedor del pop-up */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Animación del pop-up */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
<center>
<br><br><br>
<button class="popup" onclick="mostrarMensaje()">Agregar al carrito
  <span class="popuptext" id="myPopup">¡Producto agregado con éxito!</span>
</button>
</center>

Espero te sirva :)

2
  • lo copie exactamente y sigue si funcionarme
    – R.Gabriel
    Commented el 22 nov. 2017 a las 18:21
  • Ejecutalo aquí, funciona a la perfección. ¿Lo estás ejecutando a través de un servidor de pruebas (localhost/blablabla) o a través del archivo (C://bla/bla/bla)? Commented el 23 nov. 2017 a las 4:54
1

El error es que al acceder al elemento por medio de su id e intentar acceder a style , no lo obtendrá , ya que esta propiedad solo leerá los estilos en línea es decir <div id="alerta" style="display: none"> ahí si podrá obtener el valor de display , pero como el style lo aplica de forma diferente será necesario acceder a getComputedStyle() para obtener el estilo final.

Su ejemplo quedaría

function mostrar() {
    var x = document.getElementById('alerta');
    if (window.getComputedStyle(x).display=== 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
#alerta{
    margin-top:1 0px;
    display: none;
}

#alerta p{
    color: mediumseagreen;
}
<input type="button" onclick="mostrar()" class="add-to-cart" value="Añadir a compra" />

<div id="alerta" style="display: none">
    <p>Su articulo se ha anadido</p>
</div>

Se podría haber realizado esto , haciendo uso de classList() para alternar la clase mediante toggle , añadiendo una clase .visible con display: block !important; , el !important es para se agregue el estilo ya que si no el id tendrá "más peso" y seguirá con display:none; como fue declarado en el CSS.

function mostrar() {
    var x = document.getElementById('alerta');
    x.classList.toggle("visible");
}
#alerta{
    margin-top:1 0px;
    display: none;
}

#alerta p{
    color: mediumseagreen;
}
.visible{
  display: block !important;
}
<input type="button" onclick="mostrar()" class="add-to-cart" value="Añadir a compra" />
<div id="alerta">
    <p>Su articulo se ha anadido</p>
</div>

7
  • Lo acabo de cambiar sigue sin funcionar
    – R.Gabriel
    Commented el 22 nov. 2017 a las 18:15
  • @R.Gabriel intentó con el código de mi ejemplo ? , desde aquí funciona correctamente. ¿Muestra algún posible error en consola ? ¿quizá de su demás código que no nos mostró?
    – Dev. Joel
    Commented el 22 nov. 2017 a las 18:21
  • Si , tengo demas codigo, es muy extenso.
    – R.Gabriel
    Commented el 22 nov. 2017 a las 18:26
  • Tengo unos scripts para hacer un quick-view a algunos productos el boton que quiero agregar esta dentro del popup que genera el quick-view
    – R.Gabriel
    Commented el 22 nov. 2017 a las 18:27
  • 1
    Los errores que comenta , no están relacionados con su pregunta. No podría ayudar en ese sentido , simplemente me centré en su pregunta y mi respuesta funciona. Los errores quizá podría añadir una nueva pregunta con la descripción y el código necesario y se le brindará el apoyo.
    – Dev. Joel
    Commented el 22 nov. 2017 a las 18:31
1

Simplemente le he añadido al JS window.addEventListener("load",mostrar); para que al cargar la página se apliquen las instrucciones de la función mostrar(). Espero que te haya servido de ayuda.

window.addEventListener("load",mostrar);
function mostrar() {
  var x = document.getElementById('alerta');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
#alerta{
    margin-top:1 0px;
    display: none;
}

#alerta p{
    color: mediumseagreen;
}
  <form>
      <input type="button" onclick="mostrar()" class="add-to-cart" value="Anadir a compra" />
      <link rel="stylesheet" href="estilos.css">


</form>
      <div id="alerta">
          <p>Su articulo se ha anadido</p>
      </div>

0

La function mostrar quedaría asi :

<script>
    $(document).ready(function(){
                    $(".add-to-cart").click(function(){
                          $("#alert").show();
                    });
    });
</script>

Utilizando esto te sobraria el onClick="mostrar()" porque ya iría implementado en la función JQuery

0

Hay una forma más sencilla que no requiere JavaScript.

Partiendo del siguiente HTML:

<button class="boton">Añadir
<span class="botontext">Su artículo se ha añadido</span>
</button>

Implementamos el siguiente CSS:

    .boton {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    .boton .botontext {
        visibility: hidden;
        width: 160px;


  background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}
.boton .botontext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.boton:focus > .botontext {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

Ahora en teoría ya funcionaría todo sin necesidad de utilizar JS.

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.