0
377
Views¿Cómo puedo agregar más de una ventana emergente y cómo puedo cambiarla en css?
Tengo dos preguntas que no puedo resolver.
- Mi primera es, ¿cómo puedo cambiar el siguiente código, para poder agregar más de una ventana emergente en mi sitio web? en js es
function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); }y en html
<p> Hello!<div class="popup" onclick="myFunction()"> <p>this is clickable </p> <span class="popuptext" id="myPopup">this is inside my popup</span> </div> </p>Necesito cambiar la función para poder tener más que solo la ventana emergente anterior. ¿Cómo puedo hacer eso? Está claro que necesito otra ID que myPopup, pero ¿cómo puedo agregar más variables en el JS?
2) El siguiente es mi CSS, pero cuando está en HTML, el texto antes del DIV se muestra normalmente en mi sitio web, pero debido al DIV, el texto aparece una línea debajo del texto. ¿Necesito declarar algo en el div para que todo el texto aparezca en una línea?
.popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .popuptext { visibility: hidden; width: 160px; color: #fff; text-align: center; border-radius: 6px; padding: 16px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #D2B48C transparent transparent transparent; } .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }¡Muchas gracias por cualquier tipo de ayuda!
2 answers
Answer question0
No necesitas otra identificación. Con
querySelectorAll()puede seleccionar todos los elementos con una ID dada.Use
spanen lugar dediv.<p>también hará un salto de línea.
Mis ediciones en su código:
-
spanen lugar dedivy etiquetas izquierda<p> - agregó una nueva ventana emergente
- atributos
onclickeliminados (no es una buena práctica, useaddEventListeneren su lugar) - JavaScript completo
-
color: #000a.popup .showen CSS
const myElements = document.querySelectorAll(".popup") myElements.forEach(el => { el.addEventListener("click", () => { el.querySelector("#myPopup").classList.add("show"); }) }) .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .popuptext { visibility: hidden; width: 160px; color: #fff; text-align: center; border-radius: 6px; padding: 16px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #D2B48C transparent transparent transparent; } .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; color: #000; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } <br><br><p> Hello! <span class="popup"> this is clickable <span class="popuptext" id="myPopup"> this is inside my popup </span> </span> <span class="popup"> this is clickable <span class="popuptext" id="myPopup"> this is inside my popup </span> </span> </p>0
Finalmente pude resolver tu problema. Esta captura de pantalla puede actuar como una respuesta a sus dos preguntas.
Realmente no sé cómo quieres que sea el diseño emergente. En todos los casos, este es un código válido, es decir, cuando hace clic en "esto se puede hacer clic", ambas ventanas emergentes aparecerán al mismo tiempo.
Código para copiar y pegar:
function myFunction() { var popups = document.getElementsByClassName("popuptext"); for (var i = 0; i < popups.length; i++) popups[i].classList.toggle("show"); } .popup { position: relative; display: inline-block; cursor: pointer; } .popuptext { opacity: 0; width: 160px; color: black; border-radius: 6px; padding: 16px 0; z-index: 1; } .popup .popuptext::before { content: ""; border-width: 10px; border-style: solid; border-color: #d2b48c transparent transparent transparent; } .show { opacity: 1; transition: opacity 1s; } <p> Hello! <div class="popup" onclick="myFunction()"> <p>this is clickable </p> <p class="popuptext"> this is inside my 1st popup </p> <p class="popuptext"> this is inside my 2nd popup </p> </div> </p>Para más ayuda, estoy disponible.