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

实现效果
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;
			}
			.login-input-content{
				margin-top: 20px;
			}
			.login-button{
				position: absolute;
				left:25%;
				bottom:0;
				width: 50%;
				height: 40px;
				margin: 30px auto ;
				line-height: 40px;
				font-size: 14px;
				border: #ccc 2px solid;
				text-align: center;
				border-radius: 5px;
			}
			.login-bg{
				display: none;
				text-align: center;
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				background-color: rgba(0,0,0,.1);
			}
			.login-button a{
				display: block;
			}
			.login-input input.list-input{
				margin-bottom: 20px;
				float: left;
				line-height: 35px;
				width: 350px;
				height: 35px;
				border: #ccc 1px solid;
				text-indent: 5px;
				border-radius: 5px;
			}
			.login-input label{
				float: left;
				width: 90px;
				padding-right: 10px;
				text-align: right;
				line-height: 35px;
				height: 35px;
				font-size: 16px;
			}
			.login-title span{
				position: absolute;
				font-size: 12px;
				right: -20px;
				top: -40px;
				background-color: #fff;
				border: #ebebeb solid 1px;
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 20px;
				font-weight: 400;
			}
		style>
	head>
	<body>
		<div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框a>div>
		<div class="login" id="login">
			<div id="title" class="login-title">
				登录会员<span><a href="javascript:void(0);" id="closeBtn" class="close-login">关闭a>span>
			div>
			<div class="login-input">
				<div class="login-input-content">
					<label>用户名:label>
					<input type="text" placeholder="请输入用户名" name="info[username]" id="username" value="" class="list-input"/>
				div>
				<div class="login-input-content">
					<label>密码:label>
					<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" value="" class="list-input"/>
				div>
			div>
			
			<div class="login-button" id="loginBtn">
				<a href="javascript:void(0);" id="login-button-submit" class="login-button-submit">登录会员a>
			div>
		div>
		<div id="bg" class="login-bg">div>
		<script type="text/javascript">
		// 1、获取元素
			var login = document.querySelector('.login');
			var mask = document.querySelector('.login-bg');
			var link = document.querySelector('#link');
			var closeBtn = document.querySelector('#closeBtn');
			var title = document.querySelector('#title');
		// 2、点击弹出这个链接 link 让mask 和login 显示出来
			link.addEventListener('click',function(){
				mask.style.display = 'block';
				login.style.display = 'block';
			})
		// 3、点击closeBtn 隐藏login 和mask
			closeBtn.addEventListener('click',function(){
				mask.style.display = 'none';
				login.style.display = 'none';
			})
		// 4、开始拖拽 
		// (1)当鼠标按下,就获得鼠标在盒子内在坐标
			title.addEventListener('mousedown',function(e){
				var x = e.pageX - login.offsetLeft;
				var y = e.pageY - login.offsetTop;
		// (2)鼠标移动的时候,把鼠标在页面中的坐标减去鼠标在盒子中的坐标,就是模态框left和top的值
				document.addEventListener('mousemove',move);
				function move(e){
					login.style.left =  e.pageX - x + 'px';
					login.style.top =  e.pageY - y + 'px';
				}
		// (3)鼠标弹起,就让鼠标事件移除
				document.addEventListener('mouseup',function(){
					document.removeEventListener('mousemove',move);
				})
			})
		script>
	body>
html>

你可能感兴趣的:(html,css,js)