当前位置： 首页 > article >正文

登录弹窗效果

article 2026/4/21 3:54:04

1，要求

点击登录按钮，弹出登录窗口
提示1：登录窗口 display:none 隐藏状态；
提示2：登录按钮点击后，触发事件，修改 display:block 显示状态
提示3：登录窗口中点击关闭按钮，触发事件，修改 display:none 隐藏状态

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录窗口</title><style>*{margin: 0; padding: 0;box-sizing: border-box;}html,body{width: 100%;height: 100%;}.container{width: 100%;height: 100%;background-color: #f2f1f2;}header{width: 1200px;height: 50px;background-color: #fff;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}header div:nth-of-type(2){display: flex;gap: 20px;cursor: pointer;}header div:nth-of-type(2) span:hover{font-weight: bolder;color: red;}.login-box{display: none;overflow: hidden;width: 300px;height: 200px;background-color: #fff;border: solid 1px orangered;border-radius: 8px;box-shadow: rgba(255,0,0,0.5) 5px 5px 5px;position: absolute;left: 1150px;top: 50px;}.login-box .header{height: 40px;background-color: orangered;display: flex;justify-content: space-between;align-items: center;color: white;cursor: pointer;padding: 0 10px;}</style>
</head>
<body><div class="container"><header><div><span>欢迎访问OPENLAB</span></div><div><span id="login">登录</span><span id="register">注册</span></div><!-- 登录框 --><div class="login-box" id="login-box"><div class="header" id="header"><span>会员登录</span><span id="close">[关闭]</span></div></div></header></div>  <script>//获取登录按钮let _login = document.getElementById("login");let _login_box = document.getElementById("login-box");//登录按钮添加事件_login.onclick = function(){_login_box.style.display = "block";}//获取关闭按钮let _close = document.getElementById("close");_close.onclick = function(){_login_box.style.display = "none";}let _header = document.getElementById("header");//鼠标按下事件document.onmousedown = function(event){let offsetX = event.offsetX;let offsetY = event.offsetY;//窗口移动事件_header.onmousemove = function(event2){let mouseX = event2.clientX;let mouseY = event2.clientY;let loginX = mouseX - offsetX;let loginY = mouseY - offsetY;//------------------边界判断//左边界if(loginX <= 0){loginX = 0;}//上边界if(loginY <= 0){loginY = 0;}//右边界let iw = window.innerWidth; //浏览器窗口宽度let lw = getComputedStyle(_login_box).width; //登录窗宽度lw = parseInt(lw);  //转换数据类型if(loginX >= (iw - lw)){loginX = iw - lw;}//下边界let ih = window.innerHeight;let lh = getComputedStyle(_login_box).height;lh = parseInt(lh);if(loginY >= (ih - lh)){loginY = ih - lh;}//设置登录样式_login_box.style.left = loginX + "px";_login_box.style.top = loginY + "px";}}//鼠标抬起事件document.onmouseup = function(){_header.onmousemove = null;}</script>
</body>
</html>

效果

相关文章：

登录弹窗效果

1&#xff0c;要求 点击登录按钮&#xff0c;弹出登录窗口 提示1&#xff1a;登录窗口 display:none 隐藏状态&#xff1b; 提示2&#xff1a;登录按钮点击后&#xff0c;触发事件&#xff0c;修改 display:block 显示状态 提示3&#xff1a;登录窗口中点击关闭按钮&#xff0…...

编程日记 2026/4/7 23:51:11

文本表示方法

词向量 独热编码模型和分布式表征模型 独热编码分布式表征固定长度的稠密词向量优点一个单词一个维度&#xff0c;彼此之间构成标准正交向量组数字化后的数值可以表示语义上的关系缺点稀疏,词向量维度大导致计算效率低 独热编码会根据语料库中的单词个数&#xff0c;来确定词…...

编程日记 2025/4/2 8:52:49

小小小病毒（3）（~_~|)

一分耕耘一分收获 声明&#xff1a; 仅供损害电脑&#xff0c;不得用于非法。损坏电脑&#xff0c;作者一律不负责。此作为作者原创&#xff0c;转载请经过同意。 欢迎来到小小小病毒&#xff08;3&#xff09; 感谢大家的支持 还是那句话&#xff1a;上代码&#xff01; …...

编程日记 2026/4/9 5:01:37

微软AutoGen高级功能——Memory

介绍 大家好&#xff0c;博主又来给大家分享知识了。这次又要给大家分享什么呢&#xff1f;哈哈。这次要给大家分享的是微软AutoGen框架的高级且重要的功能&#xff1a;Memory。在微软AutoGen中&#xff0c;Memory(记忆)是一个重要概念&#xff0c;它主要用于存储和管理智能体…...

编程日记 2026/2/16 23:25:56

Debezium系列之：时区转换器，时间戳字段转换到指定时区

Debezium系列之：时区转换器，时间戳字段转换到指定时区 示例：基本配置应用TimezoneConverter SMT的效果示例：高级配置配置选项当Debezium发出事件记录时，记录中的时间戳字段的时区值可能会有所不同，这取决于数据源的类型和配置。为了在数据处理管道和应用程序中保持数据一…...

编程日记 2026/3/6 13:30:11

【Java 面试 八股文】Spring Cloud 篇

Spring Cloud 篇 1. Spring Cloud 5大组件有哪些&#xff1f;2. 服务注册和发现是什么意思&#xff1f;Spring Cloud 如何实现服务注册发现&#xff1f;3. 我看你之前也用过nacos&#xff0c;你能说下nacos与eureka的区别&#xff1f;4. 你们项目负载均衡如何实现的&#xff1f…...

编程日记 2026/4/8 20:29:10

Esxi8.0设置nvidia显卡直通安装最新驱动

ESXI8.0设置显卡直通 在某些情况下&#xff0c;我们需要多次切换操作系统&#xff0c;以测试软件是否适用于特定系统和环境&#xff0c;减少多次重装系统的麻烦 ESXI8.0安装包 通过网盘分享的文件&#xff1a;ESXi-8.0U2-22380479-USB-NVME-集成网卡镜像.iso 链接: https://…...

编程日记 2026/4/6 8:58:31

LabVIEW袜品压力测试系统

开发了一种基于LabVIEW开发的袜品压力测试系统。该系统利用LabVIEW并结合灵敏的传感器和高精度的处理模块&#xff0c;实现了对袜品压力的精确测量和分析。系统不同于传统的服装压力测试方法&#xff0c;为研究和评价袜子的舒适性提供了新的测试手段。 ​ 项目背景 该系统的…...

编程日记 2026/4/8 20:22:34

TestHubo基础教程-创建项目

TestHubo是一款国产开源一站式测试工具&#xff0c;涵盖功能测试、接口测试、性能测试&#xff0c;以及 Web 和 App 测试&#xff0c;可以满足不同类型项目的测试需求。本文将介绍如何快速创建第一个项目&#xff0c;以快速入门上手。 1、创建项目 在 TestHubo 中&#xff0c;…...

编程日记 2026/4/20 1:28:08

3.3 企业级AI Agent工程实践：从API设计到高可用架构的全栈开发指南

企业级AI Agent工程实践：从API设计到高可用架构的全栈开发指南 引言：AI Agent开发中的工程化挑战 据2024年DevOps状态报告，AI Agent项目的失败案例中**61%**源于工程实现缺陷。本文将基于GitHub Sentinel的实战案例，揭示如何构建支持百万级请求的工业级Agent系统，涵盖AP…...

编程日记 2026/4/15 8:51:40

解锁二进制数组：JS、TS、ArkTS 解析

二进制数组基础入门 在编程的世界里&#xff0c;二进制数组就像是一把隐藏的钥匙&#xff0c;虽然不常被提及&#xff0c;但却在许多关键领域发挥着至关重要的作用。从计算机的底层硬件到前端的高性能计算&#xff0c;二进制数组都有着广泛的应用。 在计算机科学中&#xff0…...

编程日记 2026/4/18 17:39:25

C# windowForms 的DataGridView控件的使用

C# Windows Forms DataGridView 控件使用详解 DataGridView 是 Windows Forms 中用于显示和编辑表格数据的核心控件。它支持高度自定义的列类型、数据绑定、事件处理和丰富的样式配置。以下是其详细使用方法。 目录 基础使用 数据绑定 列类型与自定义...

编程日记 2026/3/29 5:08:38

深度求索—DeepSeek API的简单调用（Java）

DeepSeek简介 DeepSeek&#xff08;深度求索&#xff09;是由中国人工智能公司深度求索&#xff08;DeepSeek Inc.&#xff09;研发的大规模语言模型&#xff08;LLM&#xff09;&#xff0c;专注于提供高效、智能的自然语言处理能力&#xff0c;支持多种场景下的文本生成、对…...

编程日记 2026/4/9 11:21:01

企业使用统一终端管理(UEM)工具提高端点安全性

什么是统一终端管理(UEM) 统一终端管理(UEM)是一种从单个控制台管理和保护企业中所有端点的方法&#xff0c;包括智能手机、平板电脑、笔记本电脑、台式机和 IoT设备。UEM 解决方案为 IT 管理员提供了一个集中式平台&#xff0c;用于跨所有作系统和设备类型部署、配置、管理和…...

编程日记 2026/4/8 3:03:20

Vue.js 响应式原理与数据绑定

在 Vue.js 中&#xff0c;响应式系统是其核心特性之一&#xff0c;它使得数据的变化能够自动更新到 DOM 上&#xff0c;实现了数据和视图的双向绑定。下面详细介绍 Vue.js 响应式系统的原理以及它是如何实现数据绑定的。 原理概述 Vue.js 的响应式系统主要基于 JavaScript 的…...

编程日记 2025/9/5 4:31:42

爱彼（Audemars Piguet）：瑞士制表艺术的巅峰之作（中英双语）

爱彼&#xff08;Audemars Piguet&#xff09;&#xff1a;瑞士制表艺术的巅峰之作 在瑞士高级制表界&#xff0c;Audemars Piguet&#xff08;爱彼&#xff09; 以其大胆创新、卓越工艺和独立家族经营的传统&#xff0c;成为世界顶级腕表品牌之一。作为瑞士“三大制表品牌”之…...

编程日记 2026/4/13 10:30:55

深入理解Elasticsearch集群与分片：原理及配置方案

一、Elasticsearch集群是什么 想象一下&#xff0c;你有海量的数据&#xff0c;比如一个超大型图书馆的所有书籍信息&#xff0c;要是把这些数据都放在一台电脑里&#xff0c;不仅存不下&#xff0c;而且查询起来会超级慢。Elasticsearch集群就像是一个分布式的数据图书馆系统…...

编程日记 2025/3/2 1:52:14

1134. 国王的魔镜

题目 AC代码 #include<bits/stdc.h> using namespace std; bool hw(char s[]) {bool rtrue;int i;for(i0;i<strlen(s)/2;i){if(s[i]!s[strlen(s)-i-1]){rfalse;break;}}return r; } int main() {char s[1005];gets(s);while(hw(s)true&&strlen(s)%20){s[strl…...

编程日记 2026/4/12 16:21:40

【20250215】二叉树：144.二叉树的前序遍历

# 前序遍历-递归-LC144_二叉树的前序遍历 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right # class Solution: # def pre…...

编程日记 2026/3/23 4:56:34

浅说树形dp

文章目录 前言树形dp的转移方式树形dp的使用的场景小结 初步感知——简单的树形dp例题1例题2 深入分析——树形dp的经典模型最大独立集最小点覆盖最小支配集树上直径 前言 因为树的形式非常适合递归&#xff0c;他所带来的访问顺序也是非常符合拓扑排序的&#xff0c;故而在处…...

编程日记 2026/3/29 11:58:24

DeepSeek R1本地部署 DeepSeek Api接口调用 DeepSeek RAG知识库工作流详解

DeepSeek R1本地部署 DeepSeek Api接口调用 DeepSeek RAG知识库工作流详解全集&#xff1a; 第一部分&#xff1a;Windows本地部署DeepSeek R1 第二部分&#xff1a;Macos本地部署DeepSeek R1 第三部分&#xff1a;Linux本地部署DeepSeek R1 第四部分&#xff1a;DeepSeek …...

编程日记 2026/2/19 7:46:40

使用Charles进行mock请求

在 Charles 中&#xff0c;“Compose”&#xff08;构建请求&#xff09;功能允许你手动创建和发送 HTTP 或 HTTPS 请求&#xff0c;方便进行 API 测试、调试等操作。以下是 Compose 功能的详细使用方式&#xff1a; 1. 打开 Compose 界面 启动 Charles 后&#xff0c;在菜单…...

编程日记 2026/4/6 10:40:00

linu软件编程——IO

函数接口 fputc&#xff1a; man 3 fputc 原型&#xff1a;int fputc(int c, FILE *stream); 功能: 向stream流中写入 字符c 参数&#xff1a;c:要写入的字符的ASCII码值 stream:文件流指针 返回值&#xff1a;成功返回写入字符的ASCII码值 失败返回-1 fputc(ch, stdout) put…...

编程日记 2026/4/7 4:39:27

RAMinit 程序编译运行考古记录

本科的时候浅浅研究了DOSBox&#xff0c;今天看到网上挺多关于雷军代码的新闻&#xff0c;我把雷军代码在web上编译出来了&#xff0c;但是我是业余选手&#xff0c;所以做得比较差&#xff0c;不过大家感兴趣可以关注我的dosplay项目&#xff0c;旨在利用js-dos实现汇编语言在…...

编程日记 2026/4/20 19:08:38

2.【线性代数】——矩阵消元

二 矩阵消元 1. 消元法2. 单行或者单列的矩阵乘法2.1 单行矩阵乘法2.2 单列矩阵乘法 3. 用矩阵记录消元过程&#xff08;初等矩阵&#xff09; 【行的线性组合&#xff08;数乘和加法&#xff09;】3.1 row2-3row1的矩阵描述3.2 row3-2row2的矩阵描述3.3 矩阵乘法的性质 4. 用矩…...

编程日记 2026/1/9 7:38:51

Vue 3 30天精进之旅：Day 25 - PWA支持

一、引言 在前面的24天中&#xff0c;我们已经深入探讨了Vue 3的许多核心概念和高级特性。今天&#xff0c;我们将进入一个全新的领域——PWA&#xff08;Progressive Web App&#xff09;。PWA是一种现代Web应用程序的开发模式&#xff0c;它结合了Web和原生应用的优点&#…...

编程日记 2025/11/5 18:21:34

【Pico】使用Pico进行无线串流搜索不到电脑

使用Pico进行无线串流搜索不到电脑 官串方式&#xff1a;使用Pico互联连接电脑。 故障排查 以下来自官方文档 请按照以下步骡排除故障&#xff1a; 确认电脑和一体机连接了相同的路由器WiFi网络(相同网段) IP地址通常为192.168.XX&#xff0c;若两设备的IP地址前三段相同&…...

编程日记 2026/4/18 23:41:34

Golang Model 字段自动化校验设计

背景 在我们日常开发中&#xff0c;不可避免的总要去进行各种参数校验&#xff0c;但是如果在某个场景中&#xff0c;要校验的字段非常多&#xff0c;并且在其中还有耦合关系&#xff0c;那么我们手写校验逻辑就变得非常的低效且难以维护。本篇文档就基于 DDD 领域模型设计的思…...

编程日记 2026/4/15 12:28:10

移动端测试的挑战与解决方案：兼容性、网络问题及实战策略

引言 移动应用已成为用户触达服务的核心入口，但移动端测试面临设备多样性、网络波动、用户场景复杂等多重挑战。据Statista统计，2023年全球活跃移动设备超180亿台，操作系统（Android/iOS）版本碎片化率超30%，这对测试工程师提出了极高要求。本文深度解析移动端测试的核心痛…...

编程日记 2026/4/14 11:09:27

AI agent 未来好的趋势：AI医疗影像、智能客服、个性化推荐

AI agent 未来好的趋势：AI医疗影像、智能客服、个性化推荐 目录 AI agent 未来好的趋势：AI医疗影像、智能客服、个性化推荐比特币AI Agents稳定币扩容区块链AI基础设施AI驱动的软件应用AI赋能的行业应用AI医疗影像、智能客服、个性化推荐AI药物研发比特币 市场与机构化：2024…...

编程日记 2026/4/17 18:03:00