请写一个htm点击文字弹出l弹窗并且支持实现缩放可以最大化和还原还有关闭的功能。就像Windows应用程序那样的请写出代码

以下是一个简单的HTML代码示例，可以点击文字弹出一个弹窗，并支持缩放、最大化、还原和关闭功能：

<!DOCTYPE html>
<html>
<head>
<style>
    #myModal {
        display: none; /* 默认隐藏弹窗 */
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }

    #myModal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 600px;
        min-height: 200px;
    }

    #myModal .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    #myModal .close:hover,
    #myModal .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    #myModal .maximize {
        color: #aaa;
        float: right;
        font-size: 24px;
        margin-right: 10px;
    }

    #myModal .maximize:hover,
    #myModal .maximize:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    #myModal .restore {
        color: #aaa;
        float: right;
        font-size: 24px;
        margin-right: 10px;
    }

    #myModal .restore:hover,
    #myModal .restore:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>
</head>
<body>

<p>点击<a onclick="openModal()">这里</a>打开弹窗。</p>

<div id="myModal">
    <div id="myModal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <span class="maximize" onclick="maximizeModal()">&#9744;</span>
        <span class="restore" onclick="restoreModal()">&#9723;</span>
        <h3>弹窗标题</h3>
        <p>弹窗内容</p>
    </div>
</div>

<script>
    var modal = document.getElementById("myModal");
    var modalContent = document.getElementById("myModal-content");
    var isMaximized = false;
    var prevWidth, prevHeight;

    function openModal() {
        modal.style.display = "block";
    }

    function closeModal() {
        modal.style.display = "none";
    }

    function maximizeModal() {
        if (!isMaximized) {
            prevWidth = modalContent.style.width;
            prevHeight = modalContent.style.height;
            modalContent.style.width = "100%";
            modalContent.style.height = "100%";
            isMaximized = true;
        }
    }

    function restoreModal() {
        if (isMaximized) {
            modalContent.style.width = prevWidth;
            modalContent.style.height = prevHeight;
            isMaximized = false;
        }
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            closeModal();
        }
    }
</script>

</body>
</html>

这个示例中使用了一个

原文地址: https://www.cveoy.top/t/topic/i967 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录