登录弹窗效果
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…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...