首页写一个弹窗中嵌套页面的代码

写一个弹窗中嵌套页面的代码

时间: 2024-03-17 09:44:04 浏览: 107

好的，下面是一个弹窗中嵌套页面的代码示例： ```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 文件时，就会看到一个打开弹窗的按钮。当你点击该按钮时，会打开一个弹窗，其中嵌套了一个页面。

阅读全文