Me encuentro con un problema y no puedo dar con una solución. Resulta que estoy haciendo una galería especie portfolio, en donde el usuario clickea sobre una miniatura del trabajo para visualizarlo. El tema es que al clickear, se abre un div con un iframe dentro, ya que el portfolio incluye juegos y aplicaciones interactivas. El problema surge en que aunque haya creado un div contenedor con posición fija y transparencia para bloquear el fondo, aún puedo scrollear e incluso clickear, dificultando la interacción con el div abierto. A alguien se le ocurre una solución a esto? Mi último recurso es si no, usar modals, pero tengo entendido que con los modals no puedo interactuar con los proyectos de juegos que subí.
Desde ya, muchas gracias!
Dejo el código usado:
document.getElementById("popup").showpopup = function() {
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://misitio.com/test/project1/";
document.getElementById('page').className = "darken";
document.getElementById("page").style.display = "block";
}
document.getElementById("a").onclick = function(e) {
e.preventDefault();
document.getElementById("popup").showpopup();
}
document.getElementById('page').onclick = function() {
if (document.getElementById("popup").style.display == "block") {
document.getElementById("popup").style.display = "none";
document.getElementById("page").style.display = "none";
document.getElementById('page').className = "";
}
};
#popup {
display: none;
width: 320px;
height: 480px;
top: 50%;
left: 50%;
background-color: transparent;
z-index: 300;
position: fixed;
margin-top: -280px;
margin-left: -160px;
}
#page {
display: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 90;
position: fixed;
}
.darken {
background: rgba(0, 0, 0, 0.7);
display: block;
position: fixed;
top: 0px;
left: 0px;
z-index: 80;
height: 100%;
width: 100%;
display: none;
}
#iframe {
width: 100%;
height: 100%;
border: 0;
}
.close-icon {
display: block;
box-sizing: border-box;
width: 35px;
height: 35px;
float: right;
padding-bottom: 15px;
margin-bottom: 10px;
border-width: 5px;
border-style: solid;
border-color: gray;
border-radius: 100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%);
background-color: gray;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0);
transition: all 0.3s ease;
z-index: 400;
}
<div id="ad1" class="portfolio-item deporte col-md-3">
<div class="portfolio-box">
<a href="" id="a">
<div class="portfolio-image-wrap">
<img src="img/portfolio/proyecto1.jpg" alt="" />
</div>
<div class="portfolio-caption-mask">
<div class="portfolio-caption-text">
<div class="portfolio-caption-tb-cell">
<h5 class="alt-title">Nombre del proyecto</h5>
<p>Descripción</p>
</div>
</div>
</div>
</a>
<div id="page">
<div id="popup">
<a href="#/" class="close-icon"></a>
<iframe id="iframe"></iframe>
</div>
</div>
</div>
</div>