HTML 弹窗：点击文字弹出，支持放大、最小化、关闭

<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>
<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>