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>