我遇到了一个问题,找不到解决方案。事实证明,我正在制作一种作品集画廊,用户可以点击作品的缩略图来查看它。问题是,当您单击时,会打开一个带有iframe的div,因为该组合包括游戏和交互式应用程序。问题是,即使我创建了一个位置固定、透明的容器 div 来遮挡背景,我仍然可以滚动甚至点击,从而很难与打开的 div 交互。有没有人提出解决方案?如果没有,我最后的手段是使用模态,但我知道使用模态我无法与我上传的游戏项目进行交互。
从已经非常感谢了!
我留下使用的代码:
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>
你好!
诀窍是使您不想移动的内容的样式设置
overflow
为hidden
,而不是默认样式visible
(因此可以使用滚动条进行导航)。将以下内容添加到您的方法中
showpopup
:以下是您的方法
onclick
(关闭弹出窗口时):你会实现你想要的。
参考资料:英文版 w3Schools和StackOverflow