0

auxilio. Estoy trabajando para mi jefe haciendo una web y no sé por qué no me deja usar el mismo popup que utilicé para colocar una info 2 veces. Una vez sí me lo permite pero el segundo popup queda inhabilitado. ¿Alguien podría ayudarme con esta duda?

El Primer botón para mostrar la información está correcto y funcionando, pero si copio el mismo botón y lo pego en otra parte del html, el segundo no funciona.

Por otro lado, desearía saber alguna mejor opción para desarrollar esta idea. Además quisiera recalcar que en el primer popup, cuando se abre tengo problemas para formular una sangria ya que el texto queda muy pegado al margen del popup.

Muchas Gracias por su atención y tiempo. Bendiciones. <3

CSS:

  <!--ETIQUETA POPUP-->
  <style>
/* Popup container - can be anything you want */
.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: 1000px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 10px;
 margin-left: 10px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin: 5px;
}

/* 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;
}


.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 ;}
}
</style>

HTML + JAVASCRIPT:

<div id="perfilegreso">
<h3>Perfíl de egreso</h3>introducir el código aquí
<div class="popup" onclick="myFunction()">Click para ver perfíl de egreso.
<span class="popuptext" id="myPopup">
<div>
El Ingeniero en Administración de Empresas, titulado de la Universidad Tecnológica de Chile INACAP, se desempeña con responsabilidad en la administración de las áreas funcionales, orientando su gestión al logro de las metas , bajo un enfoque sistémico de la organización y su entorno, y dominio integral de su ámbito disciplinar. Asimismo, diseña y propone soluciones integrando tecnologías actualizadas para la mejora continua, la creación de nuevos negocios y desarrollo de emprendimientos en los distintos sectores productivos y de servicios del país.<br><br>Se desempeña competentemente en las siguientes áreas, en concordancia con las requeridas para el ejercicio de su profesión:<br><br>Área de Desempeño I: Gestión de Áreas Funcionales de la Organización.<br><br>1.Administra procesos financieros en coherencia con la estrategia de la organización, fundamentando su actuar, de acuerdo a normativas y legislación vigente.<br><br>2.Administra procesos de marketing, ventas y operaciones comerciales, considerando la situación, tendencias del mercado y las necesidades de los consumidores, trabajando de manera colaborativa para el logro de metas conjuntas.<br><br>3.Administra procesos de gestión de personas, de acuerdo a las necesidades de la organización, normativa interna, legislación vigente y las condiciones del entorno, comunicando y transfiriendo información de manera efectiva.<br><br>Área de Desempeño II: Administración y Emprendimiento.<br><br>4.Diseña soluciones factibles asociadas a la mejora continua en el ámbito de la organización, el desarrollo de nuevos negocios  y proyectos de emprendimiento, fundamentando sus decisiones, bajo un enfoque sistémico y haciendo uso de tecnologías actualizadas.<br><br>5.Fundamenta propuesta de solución asociada a la mejora continua en la organización, el desarrollo de nuevos negocios y proyectos de emprendimiento, logrando la adhesión y comprensión de otros.      
</ul>               
</div>                                
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</div>
4
  • Es simple por que estas usando el mismo id para los 2 cuando se sabe que los id son únicos. el 15 oct. 2019 a las 20:03
  • Entonces si cambio el segundo <div id="perfilegreso"> por <div id="perfilegreso2">, el problema podría quedar resuelto? Ya probé pero no resultó :///
    – Robert N
    el 15 oct. 2019 a las 20:05
  • Yep, pruebalo y me dices que tal. el 15 oct. 2019 a las 20:06
  • El problema persiste. Pero has hecho un buen intento, deseo felicitarte compañero por tu espiritu solidario e intentar ayudarme en mi problema laboral
    – Robert N
    el 15 oct. 2019 a las 20:12

2 respuestas 2

0

Cambia tu función así para que solo uses una y le mandes por parámetro el nombre del popup a mostrar y cambia el id del popup:

<div id="perfilegreso">
<h3>Perfíl de egreso</h3>introducir el código aquí
<div class="popup" onclick="myFunction('myPopup')">Click para ver perfíl de egreso.
<span class="popuptext" id="myPopup">
<div>
<ul>
primer popup
</ul>               
</div>                                
</span>
</div>
<h3>Perfíl de egreso</h3>introducir el código aquí
<div class="popup" onclick="myFunction('myPopup2')">Click para ver perfíl de egreso.
<span class="popuptext" id="myPopup2">
<div>
<ul>   
segundo pop up    
</ul>               
</div>                                
</span>        
</div>
<script>
// When the user clicks on div, open the popup
function myFunction(nombre_popup) {
var popup = document.getElementById(nombre_popup);
popup.classList.toggle("show");
}
</script>
</div>

respecto a los margenes no te lo muestra por que no tienes abierta la etiqueta <ul> en el ejemplo la tengo abierta y cerrada y muestra bien el margen

2
  • dentro de las etiquetas <ul> qué debe ir exactamente??? el párrafo de escritura???? :O Muchas gracias por tu ayuda
    – Robert N
    el 15 oct. 2019 a las 20:21
  • Acabo de ver la falla que mencionas, faltaba una etiqueta ul que abrir. Muchas gracias
    – Robert N
    el 15 oct. 2019 a las 20:25
0

Muchachos después de analizar el código he dado con la respuesta:

En el código del segundo popup aplicado, he cambiado el javascript por lo siguiente:

ACTUAL:

            <script>

        function myFunctionX() {
        var popup = document.getElementById("myPopupX");
        popup.classList.toggle("show");
        }
        </script>

ANTERIOR:

                            <script>
                        // When the user clicks on div, open the popup
                        function myFunction() {
                          var popup = document.getElementById("myPopup");
                          popup.classList.toggle("show");
                        }
                        </script>

MUChas Gracias a todos aquellos que han tenido el tiempo de leerme.

Bye bye

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.