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">×</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 文件路径。
这段代码创建了一个按钮，点击按钮会弹出一个悬浮居中自适应显示的 iframe，iframe 的内容为指定的 HTML 文件。关闭按钮和遮罩层也已经添加好，可以直接使用。在窗口大小改变时，会自动重新居中显示弹窗。
原文地址: https://www.cveoy.top/t/topic/EXN 著作权归作者所有。请勿转载和采集!