PHP iframe 悬浮居中自适应显示 HTML 内容

使用 PHP 创建悬浮居中自适应显示 iframe 的 HTML 内容

本文将介绍如何使用 PHP 创建一个悬浮居中、自适应显示的 iframe，并提供代码示例，帮助您轻松实现 HTML 内容的动态展示。

代码示例

<!DOCTYPE html>
<html>
<head>
	<title>PHP iframe 悬浮居中自适应显示 HTML</title>
	<style type="text/css">
		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: none;
		}

		.popup {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			height: 80%;
			background-color: white;
			 z-index: 9999;
			display: none;
		}

		.close {
			position: absolute;
			top: 0;
			right: 0;
			padding: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<button id="show-popup">Show Popup</button>

	<div class="overlay"></div>
	<div class="popup">
		<span class="close">&times;</span>
		<iframe id="my-iframe" src="" frameborder="0" width="100%" height="100%"></iframe>
	</div>

	<script type="text/javascript">
		var showPopupBtn = document.querySelector('#show-popup');
		var overlay = document.querySelector('.overlay');
		var popup = document.querySelector('.popup');
		var closeBtn = document.querySelector('.close');
		var iframe = document.querySelector('#my-iframe');

		showPopupBtn.addEventListener('click', function() {
			overlay.style.display = 'block';
			popup.style.display = 'block';
			iframe.src = 'your_html_file.html';
		});

		closeBtn.addEventListener('click', function() {
			overlay.style.display = 'none';
			popup.style.display = 'none';
			iframe.src = '';
		});

		window.addEventListener('resize', function() {
			if (popup.style.display === 'block') {
				popup.style.top = '50%';
				popup.style.left = '50%';
				popup.style.transform = 'translate(-50%, -50%)';
			}
		});
	</script>
</body>
</html>

注意：

替换 your_html_file.html 为您的 HTML 文件路径。

代码解释

HTML 结构:
- 创建一个按钮 (<button id="show-popup">Show Popup</button>) 用于触发弹窗显示。
- 创建一个遮罩层 (<div class="overlay"></div>)，在弹窗显示时覆盖整个页面。
- 创建一个弹窗 (<div class="popup"></div>)，包含关闭按钮 (<span class="close">×</span>) 和 iframe (<iframe id="my-iframe" src="" frameborder="0" width="100%" height="100%"></iframe>)。
CSS 样式:
- 使用 position: fixed 和 top: 0, left: 0 将遮罩层固定在页面顶部，并覆盖整个页面。
- 使用 position: fixed, top: 50%, left: 50%, transform: translate(-50%, -50%) 将弹窗居中显示。
- 使用 z-index: 9999 将弹窗置于页面最上层。
- 为关闭按钮添加 cursor: pointer 使其成为可点击的元素。
JavaScript 代码:
- 添加事件监听器，当点击按钮时，显示遮罩层和弹窗，并设置 iframe 的 src 属性为指定的 HTML 文件路径。
- 添加事件监听器，当点击关闭按钮时，隐藏遮罩层和弹窗，并清空 iframe 的 src 属性。
- 添加窗口大小改变事件监听器，当窗口大小改变时，重新调整弹窗的 top, left 和 transform 属性，确保弹窗始终居中显示。

使用方法

创建一个新的 HTML 文件，将上述代码复制粘贴到文件中。
替换 your_html_file.html 为您要显示的 HTML 文件路径。
在浏览器中打开 HTML 文件，点击按钮，即可查看悬浮居中自适应显示的 iframe。

希望本文能够帮助您轻松实现 PHP iframe 悬浮居中自适应显示 HTML 内容的效果！