html实现右上角有个图标，鼠标移动到该位置出现手型，点击会弹出登录窗口。

写了一段html代码
实现的效果：
实现右上角有个图标，鼠标移动到该位置出现手型，点击会弹出登录窗口。
功能实现前端，没有实现后端。
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精选商品</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        /* 遮罩层 */
        .modal-overlay {
            transition: opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
        }
        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        /* 登录窗口 */
        .login-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            z-index: 50;
        }
        .login-modal.active {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            pointer-events: all;
        }
    </style>
</head>
<body class="bg-gray-100 relative">

<!-- 右上角登录图标 -->
<div class="absolute top-4 right-4 z-10">
    <button id="loginBtn" class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white shadow hover:bg-blue-600 transition cursor-pointer">
        <i class="fa-solid fa-user text-xl"></i>
    </button>
</div>

<!-- 登录窗口遮罩层 -->
<div id="modalOverlay" class="modal-overlay fixed inset-0 bg-black/50"></div>

<!-- 登录窗口 -->
<div id="loginModal" class="login-modal bg-white rounded-lg shadow-xl w-full max-w-md p-6">
    <div class="flex justify-end mb-4">
        <button id="closeBtn" class="text-gray-500 hover:text-gray-700 transition">
            <i class="fa-solid fa-times text-xl"></i>
        </button>
    </div>
    <div class="space-y-4">
        <h2 class="text-2xl font-bold text-center text-gray-800">账号登录</h2>
        <div>
            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名/手机号</label>
            <input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" placeholder="请输入用户名或手机号">
        </div>
        <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
            <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" placeholder="请输入密码">
        </div>
        <div class="flex items-center justify-between">
            <label class="flex items-center text-sm text-gray-600">
                <input type="checkbox" class="mr-2 h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded">
                记住我
            </label>
            <a href="#" class="text-sm text-blue-500 hover:text-blue-600 transition">忘记密码？</a>
        </div>
        <button class="w-full bg-blue-500 text-white font-medium py-2 px-4 rounded-lg hover:bg-blue-600 transition">登录</button>
        <div class="text-center text-sm text-gray-600 mt-4">
            还没有账号？<a href="#" class="text-blue-500 hover:text-blue-600 font-medium transition">立即注册</a>
        </div>
    </div>
</div>

<script>
    const loginBtn = document.getElementById('loginBtn');
    const loginModal = document.getElementById('loginModal');
    const closeBtn = document.getElementById('closeBtn');
    const modalOverlay = document.getElementById('modalOverlay');

    function openLoginModal() {
        loginModal.classList.add('active');
        modalOverlay.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeLoginModal() {
        loginModal.classList.remove('active');
        modalOverlay.classList.remove('active');
        document.body.style.overflow = '';
    }

    loginBtn.addEventListener('click', openLoginModal);
    closeBtn.addEventListener('click', closeLoginModal);
    modalOverlay.addEventListener('click', closeLoginModal);

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && loginModal.classList.contains('active')) {
            closeLoginModal();
        }
    });
</script>
</body>
</html>