写一个弹窗中嵌套页面的代码
时间: 2024-03-17 19:44:04 浏览: 101
在vue中实现嵌套页面(iframe)
5星 · 资源好评率100%
好的,下面是一个弹窗中嵌套页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>弹窗中嵌套页面的示例</title>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 80%;
overflow: auto;
}
</style>
</head>
<body>
<button onclick="openModal()">打开弹窗</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<iframe src="嵌入页面的URL" width="100%" height="100%"></iframe>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
</script>
</body>
</html>
```
在这个示例中,我们首先定义了一个 modal 类来定义弹窗的样式。然后在 HTML 中创建了一个打开弹窗的按钮和一个 modal div 元素,该元素包含一个 modal-content div 元素,其中包含一个关闭按钮和一个 iframe 标签来嵌套另一个页面。当用户点击打开弹窗按钮时,调用 openModal() 函数来显示 modal 元素;当用户点击关闭按钮时,调用 closeModal() 函数来隐藏 modal 元素。
你需要将 "嵌入页面的URL" 替换为你想要嵌入的页面的 URL 地址。当你在浏览器中打开这个 HTML 文件时,就会看到一个打开弹窗的按钮。当你点击该按钮时,会打开一个弹窗,其中嵌套了一个页面。
阅读全文