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。