用html写点击超链接弹窗出iframe窗口有缓慢隐藏
以下是一个示例代码，可以实现点击超链接弹出一个包含 iframe 的弹窗，并且具有缓慢隐藏效果：
<!DOCTYPE html>
<html>
<head>
<title>点击超链接弹窗出iframe窗口</title>
<style>
#popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 9999;
}
#popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
width: 80%;
height: 80%;
overflow: auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
#popup-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#" onclick="showPopup()">点击打开弹窗</a>
<div id="popup">
<div id="popup-content">
<span id="popup-close" onclick="hidePopup()">关闭</span>
<iframe src="https://www.baidu.com" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
<script>
function showPopup() {
document.getElementById("popup").style.display = "block";
document.body.style.overflow = "hidden";
document.getElementById("popup-content").style.opacity = "0";
setTimeout(function(){
document.getElementById("popup-content").style.opacity = "1";
}, 100);
}
function hidePopup() {
document.getElementById("popup-content").style.opacity = "0";
setTimeout(function(){
document.getElementById("popup").style.display = "none";
document.body.style.overflow = "auto";
}, 500);
}
</script>
</body>
</html>
在这个示例中，我们创建了一个 id 为 popup 的 div，作为弹窗的容器。当用户点击超链接时，我们调用 showPopup() 函数来显示弹窗。这个函数会将 popup 的样式设为 display: block，并将整个页面的滚动禁用（因为弹窗是固定定位的，如果页面可以滚动会导致弹窗位置跟随滚动）。同时，我们使用了 setTimeout() 函数来实现缓慢显示的效果，将弹窗的 opacity 从 0 到 1 进行渐变。
当用户点击弹窗中的关闭按钮时，我们调用 hidePopup() 函数来隐藏弹窗。这个函数会将弹窗的 opacity 从 1 到 0 进行渐变，并使用 setTimeout() 函数在渐变完成后将弹窗的样式设为 display: none，并恢复页面的滚动。
需要注意的是，由于弹窗本身就是一个固定定位的 div，所以我们使用了 overflow: auto 来为弹窗内容添加滚动条。如果不需要滚动条，可以将这个样式设为 overflow: hidden。
原文地址: https://www.cveoy.top/t/topic/bvVx 著作权归作者所有。请勿转载和采集!