Master, mil gracias, estuve varias horas viendo lo que hiciste, lo leí, lo probé y me funciona, ahora surgen 2 cosas.
1ro. El link que me lleva al modal necesito que sea una imagen, imagina que dentro de la <ul> tengo una galeria de fotos y al dar click obtengo mayor información en el famoso iframe, según busqué, el span no me lo permite quizás se deba a eso que no puedo generar un link con la imagen.
2do. No consigo el efecto del modal que consistía en opacar el fondo y que se desplegara un cuadro (que contiene el html del iframe) el cual ocupa casi todo el ancho y el alto... el típico pop-up sin abrir otra ventana, lo que consigo tal y como esta tu ejemplo en vivo, es que aparezca un recuadro abajo, pero necesitaría no perder el estilo que había creado, te reitero las gracias porque era justo eso lo que estaba necesitando! solo faltaría poder añadirle mi pseudo-animación.
Te muestro lo que he querido hacer para ver si tu puedes editar tu código y adaptarlo a los otros div que omití poner con la tonta intensión de facilitar las cosas, solo consiguiendo complicarme ante la dificultad de adaptar el codigo javascript.
Codigo del index donde el ul tiene una galeria de imagenes donde en este caso son frutas, al clickear en la fruta se opacaria el fondo, bajaria una recuadro con informacion traida de "nombredelafruta".html
Código:
<ul>
<li>
<a href="#modal1>
<img src="frutas/manzana.jpg"/>
</a>
<li>
<div id="modal1"class="modalmask">
<div class="modal movedown">
<div id="info">
<iframe class="ficha" src="frutas/manzana.html" scrolling="no" align="center"></iframe>
</div>
<a href="#close" title="Close" class="close"><img src="img/site/close.png"/></a>
</div>
</div>
<li>
<a href="#modal2>
<img src="frutas/sandia.jpg"/>
</a>
<li>
<div id="modal2"class="modalmask">
<div class="modal movedown">
<div id="info">
<iframe class="ficha" src="frutas/sandia.html" scrolling="no" align="center"></iframe>
</div>
</div>
</div>
</ul>
Estos son los estilos del modal y la ventana emergente que quiero combinar con tu código:
.modalmask { /* <<< Fondo oscuro >>> */
background: rgba(0,0,0,0.85);
bottom: 0;
font-family: Arial, sans-serif;
left: 0;
right: 0;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
position: fixed;
top: 0;
z-index: 1000;
}
.modalmask:target { /* <<< cuando es objetivo el modal mask >>> */
opacity: 1;
pointer-events: auto;
}
.modalbox { /* <<< VENTANA >>> */
background: #fff;
border: 0.2em solid #EB75DF;
border-radius: 0.1875em;
height: 93%;
margin-top: 5%;
position: center;
padding: 0.125em 0.42em;
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
transition: all 500ms ease-in;
width: 90%;
}
.movedown { /* <<<<< Aparicion >>>>> */
margin: 0 auto;
border: 0.3em solid #B062BC;
}
.modalmask:target .movedown { /* EL DIV que tiene el div perfil */
border-radius: 0.3125em;
margin: 1% auto;
width: 90%;
height: 93%;
}
.close {
width: 1.9em;
height: 1.9em;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
background: white;
top: 0.8em;
right: 1em;
position: absolute;
text-decoration: none;
text-align: center;
z-index: 1001;
}
.close:hover {
background: red;
}
Si logras editar tu codigo con mi estilo, estaría por terminado!
Saludos!!