Creé un sitio html donde el usuario puede ingresar un código en una entrada de texto y luego este código se inserta en una base de datos MYSQL si se cumplen ciertas condiciones. En caso de una entrada exitosa en la base de datos, me gustaría notificar al usuario con un pequeño mensaje emergente, que muestra algo como "Éxito" y también indica algunos datos de la fila de la tabla en la que se insertó el código.
Encontré un mensaje emergente atractivo en la siguiente página, que me gustaría usar: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/ .
Sin embargo, en la implementación desde la página, la ventana emergente se activa al hacer clic en un botón:
document.getElementById("open-popup-btn").addEventListener("click",function(){ document.getElementsByClassName("popup")[0].classList.add("active"); }); document.getElementById("dismiss-popup-btn").addEventListener("click",function(){ document.getElementsByClassName("popup")[0].classList.remove("active"); });Me gustaría ejecutar la ventana emergente en función de una condición if, en la que compruebo si ya se ha configurado una variable php:
<?php if (isset($group)) { ?> ......HTML code.....Entonces, ¿alguien puede decirme cómo eliminar con éxito esa función "onClick" de la ventana emergente?
¡Gracias por adelantado!
Entiendo que vuelve a cargar la página después de que dichos datos se insertaron en la base de datos.
Si es así, lo que puede hacer para mostrar la ventana emergente inicialmente es simplemente agregar la clase active a su ventana emergente (elemento con popup de clase, así:
<div class="popup center active"> ... </div>PERO
para poder cerrar la ventana emergente, aún tendrá que adjuntar la segunda parte del script provisto (simplemente puede insertarlo dentro de las etiquetas del script dentro de la declaración php if (al final del elemento del body HTML), como:
<script> document.getElementById("dismiss-popup-btn").addEventListener("click",function(){ document.getElementsByClassName("popup")[0].classList.remove("active"); }); </script>nota: no cambia el hecho de que, como se dijo anteriormente, sería mejor manejar esto conXHR (por ejemplo, a través de ajax)