popups with different content?

He estado tratando de hacer que mis popups muestren contenido diferente al hacer clic para este tema encargado en tumblr pero no puede conseguir nada para trabajar con mi código existente. Estoy atrapado y frustrado, así que cualquier guía sería tan maravilloso.

 begin popup 

     
first
last
 
     
     
muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls
     

     
     

         

         face claim : here

         age : here

          gender : here

         sexuality : here

         sign : here 

         aesthetics :  here
         

         
         
     

  

    .popup {
    position:relative;
    display: inline-block;
    overflow:visible;

}

.popup .popuptext {
    visibility: hidden;
    background-color: transparent;
    color: {color:text};
    text-align: justify;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    width:200px;
    left:0px ;
    margin:auto;
    overflow:visible;
 
}

.popupcontent {
    position:absolute;
    height:235px;
    background-color:{color:container};
    width:225px;
    left:0px;
    border-radius:5px;
}



.musename {
    position:absolute;
    font-family:summer;
    font-size: 6vw;
    width:100px;
    left:20px;
    top:25px;
    line-height:25px;
    z-index:1;
    
}


.musename b {
    font-family:abril fatface;
    position:absolute;
    font-size: 2vw;
    z-index:-1;
}

.musestatsbox {
    position:absolute;
    height:120px;
    overflow:scroll;
    left:120px;
    width:95px;
    top:98px;
}

.musestats b {
    font-size:11px;
    
}

.musebio {
    position:absolute;
    line-height:10px;
    overflow:scroll;
    height:120px;
    width:90px;
    left:20px;
    top:100px;
}

.popup .show {
    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 ;}
}

Este es el guión que he estado usando, es java y sé que probablemente no es el correcto usar.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por logicloom

2 Respuestas:

  • Para lograr que tus popups muestren contenido diferente al hacer clic, necesitas hacer algunas modificaciones en tu código HTML y JavaScript. Aquí te dejo un ejemplo de cómo podrías hacerlo:

    • Primero, necesitas añadir un identificador único a cada bloque de contenido que quieres mostrar en los popups. Por ejemplo, podrías tener dos bloques con los identificadores "popup-1" y "popup-2".
    • Luego, modifica tu función `myFunction()` para que acepte un parámetro que represente el identificador del popup que quieres mostrar.
    • Finalmente, al hacer clic en un elemento que activa el popup, llama a `myFunction()` pasando como argumento el identificador del popup que deseas mostrar.

    Aquí te muestro cómo podrías modificar tu código:

    HTML:

    html

    Mostrar Popup 1
    

    Mostrar Popup 2

    JavaScript:

    javascript
function myFunction(popupId) {
  var popup = document.getElementById(popupId);
  popup.classList.toggle("show");
}

    Con estos cambios, al hacer clic en "Mostrar Popup 1" se mostrará el contenido del popup con el identificador "popup-1", y al hacer clic en "Mostrar Popup 2" se mostrará el contenido del popup con el identificador "popup-2".

    Espero que esta guía te sea útil y puedas implementarla con éxito en tu código. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 16:53 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    Necesitas que tus ventanas emergentes muestren contenido diferente cuando se hace clic en ellas.

    Solución:

    Para mostrar contenido diferente en las ventanas emergentes, puedes usar la siguiente lógica:

    • Crea una matriz con el contenido de cada ventana emergente.
    • Al hacer clic en una ventana emergente, muestra el contenido correspondiente de la matriz.

    Código actualizado:

    JavaScript:

    
const popupContent = [
  // Contenido de la primera ventana emergente
  "
    Contenido de la primera ventana emergente
    ",

  // Contenido de la segunda ventana emergente
  "
    Contenido de la segunda ventana emergente
    ",

  // ... y así sucesivamente
];

function showPopup(index) {
  // Obtiene la ventana emergente
  const popup = document.getElementById("myPopup");

  // Muestra el contenido correspondiente
  popup.innerHTML = popupContent[index];

  // Muestra la ventana emergente
  popup.classList.add("show");
}

    HTML:

    CSS:

    
/ Estilos de la ventana emergente /
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/ Contenido de la ventana emergente /
.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}

    Cómo funciona:

    Cuando se hace clic en un botón, llama a la función showPopup() y pasa el índice del contenido de la ventana emergente correspondiente. La función obtiene la ventana emergente, inserta el contenido correspondiente y luego la muestra.

    Respondida el Dec 18, 2020 a las 17:00 - por Gemini

    Votos positivos: 0 | Votos negativos: 0