JavaScript模态框显示、隐藏、拖拽效果的实现

最新推荐文章于 2024-05-23 21:59:51 发布

a_fafafa

最新推荐文章于 2024-05-23 21:59:51 发布

阅读量1.3k

点赞数

文章标签： html css js

本文链接：https://blog.csdn.net/weixin_49203128/article/details/119599281

版权

实现效果
1、点击登录按钮，模态框显示
2、点击关闭按钮，模态框隐藏
3、在指定可拖拽位置按下鼠标，模态框可跟随鼠标移动
4、松开鼠标，模态框停留在原地

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
     
				margin: 0;
				padding: 0;
			}
			a{
     
				text-decoration: none;
				color:#000;
			}
			.login-header{
     
				text-align: center;
				font-size: 25px;
				width: 400px;
				height: 50px;
				line-height: 50px;
				margin: 10px auto;
				border: #ccc 2px solid;
				border-radius: 15px;
				background-color:#ebebeb;
			}
			.login{
     
				display: none;
				width: 512px;
				height: 280px;
				position: fixed;
				border: #ebebeb solid 1px;
				border-radius: 10px;
				left: 50%;
				top: 50%;
				background-color: #fff;
				box-shadow: 0px 0px 20px #ddd;
				z-index: 9999;
				transform: translate(-50%,-50%);
			}
			.login-title{
     
				text-align: center;
				margin: 20px auto;
				width: 100%;
				height: 40px;
				font-size: 20px;
				font-weight: 600;
				position: relative;
				cursor: move;
			}

最低0.47元/天解锁文章

a_fafafa

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript模态框显示、隐藏、拖拽效果的实现

实现效果1、点击登录按钮，模态框显示2、点击关闭按钮，模态框隐藏3、在指定可拖拽位置按下鼠标，模态框可跟随鼠标移动4、松开鼠标，模态框停留在原地<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;
复制链接

扫一扫