登录弹窗效果
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…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
云原生安全实战：API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...