Soy nuevo en html y css. Ahora estoy aprendiendo sobre la ventana emergente y me he encontrado con un problema. Echa un vistazo a este sencillo violín: https://jsfiddle.net/74agLucr/
function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */ .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; } /* Popup arrow */ .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; } /* Toggle this class - hide and show the popup */ .popup .show { opacity: 0; /* add this */ visibility: visible; -webkit-animation: fadeIn 3s; animation: fadeIn 3s; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } <h2>Popup</h2> <div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div>Cuando hace clic en el texto, la ventana emergente aparece y desaparece en breve. Cuando se vuelve a hacer clic, no hará nada. Debo hacer clic dos veces para que vuelva a aparecer. ¿Podría alguien indicarme la dirección correcta y ayudarme a comprender cuál es el problema?
El problema con la ventana emergente es que alternar agrega una clase si no se agregó y elimina si ya se agregó. Es por eso que tienes que hacer clic dos veces para que funcione. Puede intentar configurar setTimeout() para que se desactive después de 3 segundos de animación.
function myFunction() { var popup = document.getElementById("myPopup"); if(!popup.classList.contains("show")){ popup.classList.add("show"); setTimeout(()=>{popup.classList.remove("show");}, 3000); } }