I run into a problem and I can not find a solution. It turns out that I'm doing a portfolio-like gallery, where the user clicks on a thumbnail of the work to visualize it. The issue is that when you click, a div opens with a iframe inside, since the portfolio includes games and interactive applications. The problem arises in that although I have created a container div with fixed position and transparency to block the background, I can still scrolling and even clicking, hindering the interaction with the open div. Can someone come up with a solution to this? My last resource is if not, use modals, but I understand that with modals I can not interact with the projects of games that I uploaded.
Of course, thank you very much!
I leave the used code:
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>