弹出和覆盖页面
弹出和覆盖页面
提问于 2016-12-27 20:54:41
我已经创建了一个带有覆盖的弹出页面(将单独的页面加载到div中)，但是我关闭弹出窗口的选项并没有显示出来。
以下是弹出窗口的链接：http://jymeross.com/project5.html
如何使关闭窗口(.cancel类)出现？"X“链接目前只显示在这里：http://jymeross.com/project5.html#loginScreen
这是密码
<head>
<link rel="stylesheet" href="slider1.css" type="text/css" charset="utf-8" />
<style type="text/css">
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:50;
width:100%;
height:100%;
display:none;
}
#gallery
{
height:525px;
width:675px;
margin:0 auto;
position: relative;
z-index:100;
display:none;
border:5px solid #cccccc;
border-radius:10px;
}
#gallery:target, #gallery:target + #cover{
display: block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
z-index:100;
top:3px;
right:2px;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
}
</style>
</head>
<body>
<br><br>
<div align="center">
<a href="#gallery" onclick="load_project1()" class="button">View Gallery</a>
</div><!--close center-->
<div id="gallery">
<a href="#" class="cancel">×</a>
</div><!--close gallery-->
<div id="cover">
</div>
<script>
function load_project1() {
document.getElementById("gallery").innerHTML='<object type="text/html" width="575" height="325" data="project1.html"></object>';
}
</script>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-27 22:42:26
使子div位于库下，然后将内容加载到div。
<div id="gallery">
<a href="#" class="cancel">×</a>
<div id="gallery-body"></div>
</div>
function load_project1() {
document.getElementById("gallery-body").innerHTML='<object type="text/html" width="575" height="325" data="project1.html"></object>';
}然后你会保持紧密的联系在那里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41352107
复制相关文章
相似问题
腾讯云开发者
