HTML/CSS实现点击导航登录项弹出登录窗口的方法

问题原因 #

点击选项跳转页面的核心原因是<a>标签自带默认跳转行为，哪怕href="#"也会触发页面锚点跳转到顶部，需要在点击事件里阻止这个默认行为，再绑定弹窗触发逻辑即可。 #

第一步：修改INDEX.HTML代码 #

需要在原有HTML基础上做三处调整：

• 给登录选项的<li>加专属标识，方便单独绑定事件
• 在导航栏同级位置添加登录弹窗的DOM结构
• 修改原有JS逻辑，给登录项单独加弹窗触发、阻止默认跳转的逻辑
  完整修改后的INDEX.HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Panel Login</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="navigation">
        <ul>
            <li class="list active">
                <a href="#">
                    <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
                    <span class="text">Home</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="headset-outline"></ion-icon></span>
                    <span class="text">AudioBooki</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="book-outline"></ion-icon></span>
                    <span class="text">Ebooki</span>
                </a>
            </li>
            <li class="list">
                <a href="#">
                    <span class="icon"><ion-icon name="eye-outline"></ion-icon></span>
                    <span class="text">Poszukiwania</span>
                </a>
            </li>
            <!-- 给登录项加id方便单独绑定事件 -->
            <li class="list" id="loginNav">
                <a href="#">
                    <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
                    <span class="text">Logowanie</span>
                </a>
            </li>
            <div class="indicator"></div>
        </ul>
    </div>

    <!-- 新增登录弹窗结构 -->
    <div class="login-modal" id="loginModal">
        <div class="modal-mask" id="modalMask"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户登录</h3>
                <span class="close-btn" id="closeBtn">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-item">
                    <label>用户名</label>
                    <input type="text" placeholder="请输入用户名">
                </div>
                <div class="form-item">
                    <label>密码</label>
                    <input type="password" placeholder="请输入密码">
                </div>
                <button class="login-submit">登录</button>
            </div>
        </div>
    </div>
        

    <script>
        const list = document.querySelectorAll('.list');
        const loginNav = document.getElementById('loginNav');
        const loginModal = document.getElementById('loginModal');
        const closeBtn = document.getElementById('closeBtn');
        const modalMask = document.getElementById('modalMask');

        function activeLink(e){
            // 点击登录项时阻止a标签默认跳转，触发弹窗
            if(this === loginNav){
                e.preventDefault();
                loginModal.classList.add('show');
                return
            }
            // 其余导航项保留原有选中态逻辑
            list.forEach((item) =>
            item.classList.remove('active'));
            this.classList.add('active');
        }

        // 关闭弹窗通用方法
        function closeModal(){
            loginModal.classList.remove('show');
        }

        // 绑定导航点击事件
        list.forEach((item) =>
        item.addEventListener('click',activeLink))
        // 绑定弹窗关闭事件：点关闭按钮、点遮罩层均可关闭
        closeBtn.addEventListener('click', closeModal);
        modalMask.addEventListener('click', closeModal);
    </script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

第二步：补充STYLE.CSS代码 #

原有导航样式不需要修改，直接在CSS文件末尾追加弹窗相关样式即可，配色和原有导航绿色主题保持统一：

/* 登录弹窗样式 */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}
.login-modal.show {
    display: block;
}
.modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}
.modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}
.modal-header h3 {
    font-size: 18px;
    color: #222327;
    font-weight: 600;
}
.close-btn {
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}
.close-btn:hover {
    color: #222327;
}
.modal-body {
    padding: 25px 20px;
}
.form-item {
    margin-bottom: 18px;
}
.form-item label {
    display: block;
    font-size: 14px;
    color: #222327;
    margin-bottom: 6px;
}
.form-item input {
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
}
.form-item input:focus {
    border-color: #29fd53;
}
.login-submit {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 6px;
    background: #29fd53;
    color: #222327;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
}
.login-submit:hover {
    opacity: 0.9;
}

逻辑说明 #

• 弹窗通过添加/移除show类名控制显示隐藏，没有引入额外框架，纯原生实现
• 仅登录项点击时会触发弹窗，其余导航项的选中态滑动效果完全保留
• 点击弹窗右上角关闭按钮、点击外部半透明遮罩层都可以关闭弹窗，符合常规交互习惯
• 输入框聚焦色、按钮色和原有导航的高亮绿色一致，视觉风格统一

内容的提问来源于stack exchange，提问作者KoKoKoError404