高端JS（JavaScript）弹窗登录效果html模板

13 浏览

本文将为你提供一个美观实用的高端JavaScript弹窗登录html模板，包含完整的登录表单和验证功能。

设计思路

  • 简洁现代的UI设计
  • 响应式布局，适配各种设备
  • 平滑的动画过渡效果
  • 表单验证功能
  • 记住登录状态选项

高端JS（JavaScript）弹窗登录效果html模板

最终实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS弹窗登录模板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            text-align: center;
            color: white;
            max-width: 800px;
        }
        
        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .btn {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1.1rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
        }
        
        .btn:hover {
            background: #ff5252;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
        }
        
        /* 登录弹窗样式 */
        .login-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .login-content {
            background: white;
            border-radius: 10px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            animation: slideUp 0.4s ease;
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(50px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .login-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .login-header h2 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        
        .login-body {
            padding: 25px;
        }
        
        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
            outline: none;
        }
        
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
        }
        
        .remember-me input {
            margin-right: 5px;
        }
        
        .forgot-password {
            color: #667eea;
            text-decoration: none;
        }
        
        .forgot-password:hover {
            text-decoration: underline;
        }
        
        .login-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .login-footer {
            padding: 15px;
            text-align: center;
            border-top: 1px solid #eee;
            font-size: 0.9rem;
            color: #666;
        }
        
        .login-footer a {
            color: #667eea;
            text-decoration: none;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .close-btn:hover {
            transform: rotate(90deg);
        }
        
        .error-message {
            color: #ff6b6b;
            font-size: 0.9rem;
            margin-top: 5px;
            display: none;
        }
        
        @media (max-width: 480px) {
            .login-content {
                width: 95%;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎访问我们的网站</h1>
        <p>请登录以访问更多内容</p>
        <button class="btn" id="loginBtn">点击登录</button>
    </div>
    
    <!-- 登录弹窗 -->
    <div class="login-modal" id="loginModal">
        <div class="login-content">
            <div class="login-header">
                <h2>用户登录</h2>
                <p>请输入您的账号信息</p>
            </div>
            <div class="login-body">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="username">用户名/邮箱</label>
                        <input type="text" id="username" class="form-control" placeholder="请输入用户名或邮箱">
                        <div class="error-message" id="usernameError">请输入有效的用户名或邮箱</div>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" class="form-control" placeholder="请输入密码">
                        <div class="error-message" id="passwordError">密码不能为空</div>
                    </div>
                    <div class="remember-forgot">
                        <div class="remember-me">
                            <input type="checkbox" id="remember">
                            <label for="remember">记住我</label>
                        </div>
                        <a href="#" class="forgot-password">忘记密码?</a>
                    </div>
                    <button type="submit" class="login-btn">登录</button>
                </form>
            </div>
            <div class="login-footer">
                还没有账号? <a href="#">立即注册</a>
            </div>
        </div>
        <div class="close-btn" id="closeBtn">×</div>
    </div>
    
    <script>
        // 获取DOM元素
        const loginBtn = document.getElementById('loginBtn');
        const loginModal = document.getElementById('loginModal');
        const closeBtn = document.getElementById('closeBtn');
        const loginForm = document.getElementById('loginForm');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const usernameError = document.getElementById('usernameError');
        const passwordError = document.getElementById('passwordError');
        
        // 显示登录弹窗
        loginBtn.addEventListener('click', function() {
            loginModal.style.display = 'flex';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        });
        
        // 关闭登录弹窗
        closeBtn.addEventListener('click', function() {
            loginModal.style.display = 'none';
            document.body.style.overflow = 'auto';
            resetForm();
        });
        
        // 点击弹窗外部关闭
        loginModal.addEventListener('click', function(e) {
            if (e.target === loginModal) {
                loginModal.style.display = 'none';
                document.body.style.overflow = 'auto';
                resetForm();
            }
        });
        
        // 表单验证
        function validateForm() {
            let isValid = true;
            
            // 验证用户名
            if (usernameInput.value.trim() === '') {
                usernameError.style.display = 'block';
                usernameInput.style.borderColor = '#ff6b6b';
                isValid = false;
            } else {
                usernameError.style.display = 'none';
                usernameInput.style.borderColor = '#ddd';
            }
            
            // 验证密码
            if (passwordInput.value.trim() === '') {
                passwordError.style.display = 'block';
                passwordInput.style.borderColor = '#ff6b6b';
                isValid = false;
            } else {
                passwordError.style.display = 'none';
                passwordInput.style.borderColor = '#ddd';
            }
            
            return isValid;
        }
        
        // 重置表单
        function resetForm() {
            loginForm.reset();
            usernameError.style.display = 'none';
            passwordError.style.display = 'none';
            usernameInput.style.borderColor = '#ddd';
            passwordInput.style.borderColor = '#ddd';
        }
        
        // 表单提交
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (validateForm()) {
                // 模拟登录过程
                const loginBtn = this.querySelector('.login-btn');
                const originalText = loginBtn.textContent;
                
                loginBtn.textContent = '登录中...';
                loginBtn.disabled = true;
                
                // 模拟API请求
                setTimeout(() => {
                    alert('登录成功!');
                    loginModal.style.display = 'none';
                    document.body.style.overflow = 'auto';
                    resetForm();
                    
                    loginBtn.textContent = originalText;
                    loginBtn.disabled = false;
                }, 1500);
            }
        });
        
        // 实时验证输入
        usernameInput.addEventListener('input', function() {
            if (this.value.trim() !== '') {
                usernameError.style.display = 'none';
                this.style.borderColor = '#ddd';
            }
        });
        
        passwordInput.addEventListener('input', function() {
            if (this.value.trim() !== '') {
                passwordError.style.display = 'none';
                this.style.borderColor = '#ddd';
            }
        });
    </script>
</body>
</html>

功能说明

  1. ​弹窗触发​：点击页面上的”点击登录”按钮打开登录弹窗
  2. ​表单验证​：
    • 用户名/邮箱不能为空
    • 密码不能为空
    • 实时验证输入内容
  3. ​用户体验​：
    • 平滑的动画效果
    • 响应式设计，适配移动设备
    • 登录过程中的加载状态
  4. ​交互功能​：
    • 点击弹窗外部或关闭按钮可关闭弹窗
    • 记住登录状态选项
    • 忘记密码链接
    • 注册账号链接

这个模板可以直接复制使用，也可以根据需要进行定制修改。界面美观现代，功能完整，适合各种网站使用。

WordPress 子比主题功能介绍深度解析，强大功能与精美模板一站式免费下载获取指…
自适应高级企业展示幻灯片模板，设计思路和详细代码分享。 以下是一个专业、响应式的企业…
今天和大家分享一个完美的高级WordPress前端自定义登录页面模板。有需要的小伙伴…
这是一款非常漂亮的采用自适应UI设计css+js设计的一个现代化、响应式登录html…
冬天到了，是否有想过给你的网站也添加一个雪花背景动画，让它更有氛围感呢？ 如果你由此…
这是一个美观、响应式的在线咨询表单模板，自适应设计适用于各种设备和屏幕尺寸。 如果有…
自己怎么做网站404页面？404页面在网站中起着非常重要的作用。 接下来我们将和大家…
JS原生点击缩略图全屏视频切换播放特效代码素材 JS原生点击缩略图全屏视频切换播放特…
DOM编程教学，JavaScript如何与网页元素交互经验教程 JavaScript…
JavaScript数组，操作数据列表js数组教程。 变量可以存储单个值，对象可以存…

发表评论