写两个各包含一个button的页面,其中一个页面用Iframe加载另一个页面。 设置iframe里页面为半透明,并且使得两个button重合
时间: 2024-09-17 13:06:04 浏览: 10
创建两个HTML页面分别包含一个按钮,其中主页面(通常是父页面)通过`<iframe>`加载另一个页面,同时实现按钮重叠和iframe内容的半透明效果,可以按照以下步骤操作:
**主页面(通常命名为index.html):**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
#parentBtn {
position: fixed;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
color: white;
border: none;
cursor: pointer;
z-index: 1;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 60px); /* 确保给按钮留出空间 */
border: none;
display: block;
opacity: 0.8; /* 设置iframe内容半透明度 */
transition: opacity 0.3s ease-in-out;
}
.hiddenIframe {
opacity: 0; /* 当需要隐藏iframe时使用 */
}
</style>
</head>
<body>
<button id="parentBtn" onclick="toggleChildPage()">点击查看子页</button>
<div id="childFrame" style="display:none;">
<iframe id="childIframe" src="child.html"></iframe>
</div>
<script>
function toggleChildPage() {
var childFrame = document.getElementById('childFrame');
if (childFrame.style.display === 'none') {
childFrame.style.display = 'block';
document.getElementById('childIframe').classList.remove('hiddenIframe');
} else {
childFrame.style.display = 'none';
document.getElementById('childIframe').classList.add('hiddenIframe');
}
}
</script>
</body>
</html>
```
**子页面(通常命名为child.html):**
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- 引入主页面CSS -->
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<button>子页面按钮</button>
</body>
</html>
```
在这个例子中,主页面有一个固定的底部右角按钮,点击时通过JavaScript控制`<iframe>`的显示和隐藏,以及iframe内容的透明度。子页面是一个简单的HTML文件,包含一个独立的按钮。