登录弹窗效果
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，要求 点击登录按钮，弹出登录窗口 提示1：登录窗口 display:none 隐藏状态； 提示2：登录按钮点击后，触发事件，修改 display:block 显示状态 提示3：登录窗口中点击关闭按钮࿰…...
C++上机_日期问题
1.求下一天的年月日 问题 已知某天的年月日，求下一天的年月日。 思路 参数：年，月，日（int) 返回值：void 处理：根据参数所给年月日，求下一天的年月日 思路: 1、定义一个数组&a…...
应对DeepSeek总是服务器繁忙的解决方法
最近由于访问量过大，DeepSeek服务器官网经常弹出：“服务器繁忙，请稍后再试”的提示，直接卡成PPT怎么办？服务器繁忙直接看到视觉疲劳： 解决DeepSeek卡顿问题 DeepSeek使用卡顿问题，是因为访问量…...
web第三次作业
弹窗案例 1.首页代码 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>综合案例</title><st…...
力扣 438.找到字符串中所有字母异位词
题目： 给定两个字符串 s 和 p，找到 s 中所有 p 的 异位词 的子串，返回这些子串的起始索引。不考虑答案输出的顺序。 示例 1: 输入: s "cbaebabacd", p "abc" 输出: [0,6] 解释: 起始索引等于 0 的子串是 "cb…...
【Python】Python入门——基础语法及顺序语句
Python入门——基础语法及顺序语句 官方文档地址：https://docs.python.org/zh-cn/3/tutorial/index.htmlPython 是一门易于学习、功能强大的编程语言。它提供了高效的高级数据结构，还能简单有效地面向对象编程。Python 优雅的语法和动态类型以及解释型语…...
2.2 反向传播：神经网络如何“学习“？
一、神经网络就像小学生 想象一个刚学算术的小学生，老师每天布置练习题，学生根据例题尝试解题，老师批改后指出错误。神经网络的学习过程与此相似： 输入层：相当于练习题（如数字图片）输出层&…...
frp-tool，客户端frp命令行工具
在日常开发和运维过程中，端口转发和配置管理是常见的需求。 如果有自己一台服务器，并且已经开放好端口，配置好token后，这个工具一定能帮到你。 今天给大家推荐一款非常好用的frpc命令行工具，它是一个用Python编写的命令…...
【学术投稿-第五届应用数学、建模与智能计算国际学术会议】CSS伪类选择器深度解析：分类、应用与技巧
大会官网：www.cammic.org 大会时间：2025年3月21-23日 大会地点：中国-上海（上海大学宝山校区北大门乐乎新楼） 简介 第五届应用数学、建模与智能计算（CAMMIC 2025）将于2025年3月21-23日在中国…...
常用查找算法整理（顺序查找、二分查找、哈希查找、二叉排序树查找、平衡二叉树查找、红黑树查找、B树和B+树查找、分块查找）
常用的查找算法： 顺序查找：最简单的查找算法，适用于无序或数据量小的情况，逐个元素比较查找目标值。二分查找：要求数据有序，通过不断比较中间元素与目标值，将查找范围缩小一半，效率…...
Express 中 res 响应方法详解
一、res.send() 1. 功能 该方法用于发送各种类型的响应，包括字符串、对象、数组、Buffer 等。它会自动设置响应的 Content-Type 头。 2. 示例代码 const express require("express");const app express();app.get("/", (req, res) > {…...
DeepAR：一种用于时间序列预测的深度学习模型
介绍 DeepAR是一种基于递归神经网络（RNN）的时间序列预测模型，由亚马逊在2017年提出。它特别适用于处理多变量时间序列数据，并能够生成概率预测。DeepAR通过联合训练多个相关时间序列来提高预测性能，从而在实际应用中表…...
权限模型深度解析：RBAC vs ABAC vs PBAC vs TBAC，如何选择最适合的方案？
在数字化系统的安全架构中，权限管理如同一把“隐形钥匙”，既需精准控制访问边界，又要灵活适配复杂多变的业务需求。从传统的角色划分到动态属性策略，从合规驱动的集中管控到任务流程的临时授权，RBAC、ABAC、PBAC、TBAC…...
Windows逆向工程入门之堆栈结构与信息获取
公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 1. 堆栈结构基础 堆栈的主要操作： 2. 代码功能解析 2.1 加载 ntdll.dll 2.2 获取 NtQueryInformationThread 函数指针 2.3 调用 NtQueryInformationThread 获取线程信息…...
【c++初阶】类和对象②默认成员函数以及运算符重载初识
目录 编辑 默认成员函数： 构造函数 构造函数的特性： 析构函数： 拷贝构造函数： 1. 拷贝构造函数是构造函数的一个重载形式。 2. 拷贝构造函数的参数只有一个且必须是类类型对象的引用，使用传值方式编译器直接报…...
【做一个微信小程序】校园地图页面实现
前言 上一个教程我们实现了小程序的一些的功能，有背景渐变色，发布功能有的呢，已支持图片上传功能，表情和投票功能开发中（请期待）。下面是一个更高级的微信小程序实现，包含以下功能：…...
成熟开发者需具备的能力
精业务 • 指深入理解和熟悉所开发软件的业务逻辑和需求。 • 开发者需要明确软件要解决的问题、面向的用户群体以及核心功能等。 • 精业务有助于开发者更好地设计系统架构、编写符合业务需求的代码，并能根据业务变化灵活调整开发计划。 懂原理 • 指掌握编程的基…...
计算机毕业设计--基于深度学习技术（Yolov11、v8、v7、v5）算法的高效人脸检测模型设计与实现（含Github代码+Web端在线体验界面）
基于深度学习技术（Yolov11、v8、v7、v5）算法的高效人脸检测模型 Yolo算法应用之《基于Yolo的花卉识别算法模型设计》，请参考这篇CSDN作品👇 计算机毕业设计–基于深度学习技术（Yolov11、v8、v7、v5）算法的…...
力扣做题记录 （二叉树）
二叉树 打算先来了解二叉树基础，都是简单题，目的是熟悉代码格式和解题基础思路。 1、二叉树最大深度 二叉树最大深度 方法一、深度搜索 直接用原函数做递归，比较简单 /*** Definition for a binary tree node.* struct TreeNode {* …...
机试刷题_字符串的排列【python】
题目：字符串的排列 from os import dup # # 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 # # # param str string字符串 # return string字符串一维数组 # class Solution:def backtrack(self,res,state,choi…...
从游戏UI到桌面光标：基于《重返未来：1999》风格的光标主题制作全流程解析
1. 项目概述：从游戏UI到桌面光标如果你和我一样，既是《重返未来：1999》的玩家，又对桌面美化和个性化有着近乎偏执的追求，那么这个项目可能会让你眼前一亮。它不是一个游戏模组，也不是一个壁纸包，…...
自建代理池实战：从零搭建高可用IP代理服务应对反爬策略
1. 项目概述与核心价值最近在折腾一个个人项目，需要从多个公开的学术网站和开放数据平台抓取一些研究资料。这事儿听起来简单，但实际操作起来，你会发现一个很现实的问题：很多网站对频繁的、来自同一IP的请求非常敏感，轻…...
Krones推出全球首款用于容器分配的机器人系统
Krones表示，多年来在利用机器人将包装件分组堆叠托盘层方面已取得了丰硕成果。而如今，这一技术原理被首次应用于容器进入包装机前的分配环节。Krones推出了名为Robobox SynFlow的全新模块化系统，这是业内首款采用机器人技术对容器进行可靠、轻…...
ArknightsGameResource 明日方舟游戏素材库完整实战手册
ArknightsGameResource 明日方舟游戏素材库完整实战手册 【免费下载链接】ArknightsGameResource 明日方舟客户端素材 项目地址: https://gitcode.com/gh_mirrors/ar/ArknightsGameResource 项目价值定位：三大核心优势解析 作为明日方舟游戏开发者、内容创作…...
不用微调！用LangChain+ChatGLM-6B搭建垂直领域问答系统（附避坑指南）
零微调构建垂直领域智能问答系统的工程实践 在资源有限的中小团队开发场景中，如何快速搭建专业可靠的问答系统一直是个棘手问题。传统微调方法不仅需要大量标注数据，还可能导致模型原有能力的退化——这种现象在学术界被称为"灾难性遗忘"。我们…...
今天都做了什么？
2025年12月 2025.12.25 上午 用Gemini3提供的代码实现LeNet-5实现识别MNIST 跟着上手推了一下LeNet、AlexNet、VGG的网络结构以及计算了常规的输出结果维度 2025.12.25 下午 1、复现AlexNet，效果并不理想，因为使用的是数据生成器生产的图。 2、速读了…...
观察Taotoken控制台如何清晰展示各模型的用量与费用
观察Taotoken控制台如何清晰展示各模型的用量与费用 作为一名项目负责人，管理团队在大模型上的调用成本是一项日常工作。过去，当团队使用多个不同厂商的模型服务时，账单分散、统计口径不一，常常需要手动汇总，既耗时又…...
【收藏级】2026年大模型学习避坑手册：小白零门槛入门，程序员高效进阶（实战向）
2026年，大模型早已从“前沿概念”走进日常开发和职场，成为小白转行、程序员提升竞争力的核心抓手。但随之而来的是，越来越多人陷入“学了就忘、练了不会、懂了不用”的困境——刷了几十节课程、记了上百个名词，却依然做不出一个能…...
OR-Tools：如何用Google的运筹学引擎解决现实世界优化难题？
OR-Tools：如何用Google的运筹学引擎解决现实世界优化难题？ 【免费下载链接】or-tools Googles Operations Research tools: 项目地址: https://gitcode.com/gh_mirrors/or/or-tools 面对复杂的调度排班、物流路径规划、资源分配等优化问题&#x…...
保姆级教程：在Ubuntu 20.04上搞定速腾RS-Helios-16P雷达驱动与Cartographer建图（避坑指南）
速腾RS-Helios-16P雷达与Cartographer全流程实战指南 第一次接触激光雷达建图时，看着官方文档里密密麻麻的参数和报错信息，我盯着屏幕发呆了半小时——这感觉就像拿到一台新相机却连电池盖都打不开。速腾RS-Helios-16P作为国产雷达中的性能担当ÿ…...