请写一个htm点击文字弹出l弹窗并且支持放大最小化关闭的功能要求界面美观好看并且放大缩小就跟应用窗口一样放大就是占满整个页面放大后放大按钮要变成缩小另外还有最小化要隐藏页面到左下角就像是任务栏那种请写出代码
以下是一个示例的HTML代码,实现了点击文字弹出弹窗,并支持放大、最小化和关闭功能。界面样式可以根据需要进行修改:
<!DOCTYPE html>
<html>
<head>
<title>弹窗示例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: #FFF;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: none;
}
.header {
background-color: #F5F5F5;
padding: 10px;
display: flex;
justify-content: flex-end;
}
.header button {
margin-left: 5px;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<p>点击文字弹出弹窗:</p>
<p><a href="javascript:void(0);" onclick="showPopup();">点击这里</a></p>
<div id="popup" class="container">
<div class="header">
<button onclick="toggleSize();">放大</button>
<button onclick="minimize();">最小化</button>
<button onclick="closePopup();">关闭</button>
</div>
<div class="content">
<h2>弹窗标题</h2>
<p>这是弹窗的内容。</p>
</div>
</div>
<script>
var popup = document.getElementById('popup');
var isMaximized = false;
function showPopup() {
popup.style.display = 'block';
}
function closePopup() {
popup.style.display = 'none';
}
function toggleSize() {
if (isMaximized) {
popup.style.transform = 'translate(-50%, -50%)';
popup.style.width = '400px';
popup.style.height = '300px';
isMaximized = false;
document.querySelector('.header button:nth-child(1)').textContent = '放大';
} else {
popup.style.transform = 'translate(0, 0)';
popup.style.width = '100%';
popup.style.height = '100%';
isMaximized = true;
document.querySelector('.header button:nth-child(1)').textContent = '缩小';
}
}
function minimize() {
popup.style.transform = 'translate(0, calc(100% - 30px))';
popup.style.width = '200px';
popup.style.height = '30px';
}
</script>
</body>
</html>
在上述示例中,首先定义了一个隐藏的弹窗容器,通过点击文本链接触发showPopup()函数显示弹窗。弹窗容器的样式通过CSS进行定义,其中.container表示弹窗主体,.header表示标题栏,.content表示内容区域。
弹窗支持的功能由JavaScript代码实现,closePopup()函数用于关闭弹窗,toggleSize()函数实现了放大和缩小的功能,minimize()函数实现了最小化的功能。在点击放大按钮后,会根据isMaximized变量的状态来切换弹窗的大小和位置,并修改放大按钮的文本。最小化函数会将弹窗移动到页面左下角,并设置固定的宽度和高度。
你可以将上述代码复制到一个HTML文件中,并在浏览器中打开查看效果。根据需要,你可以进一步调整样式和功能实现。
原文地址: https://www.cveoy.top/t/topic/i962 著作权归作者所有。请勿转载和采集!