js实现模态框拖拽

最新推荐文章于 2023-07-21 15:25:27 发布

TKOP_

最新推荐文章于 2023-07-21 15:25:27 发布

阅读量266

点赞数 1

分类专栏：代码分析文章标签： javascript

本文链接：https://blog.csdn.net/tkop_/article/details/113408910

版权

代码分析专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果展示和需求分析

效果展示

在这里插入图片描述

需求分析

点击登录后登录表单和遮罩层显示，点击关闭按钮隐藏。
输入密码时可以明文查看或者隐藏。
在表单的头部按下鼠标后可以拖拽表单。
鼠标弹起拖拽结束。

代码分析

HTML 代码

<body>
    <a href="javascript:;" class="login">登录我的账号</a>
    <form action="">
        <h4>账号登录</h4>
        <div class="login-items">
        	<label for="uname">用户名：</label >
        	<input type="text" placeholder="请输入用户名" id="uname">
        	</div>
        <div class="login-items">
            <label for="psw">登录密码：</label>
            <input type="password" name="" id="psw" placeholder="请输入您的密码">
            <span class="close" id="eye-state"></span>
        </div>
        <a href="javascript:;" class="login-btn">登录账号</a >
        <a href="javascript:;" class="close-btn">关闭</a >
    </form>
    <div id="bg" class="login-bg"></div>
</body>
<script src="js/模态框.js"></script>

js 代码

	var eyeState = document.querySelector('#eye-state');
	var pswInput = document.querySelector('#psw');
	var login = document.querySelector('.login');
	var loginBg = document.querySelector('#bg');
	var loginForm = document.querySelector('form');
	var closeBtn = document.querySelector('.close-btn');
	
	var eyeFlag = 0;
	eyeState.onclick = setEye;
	login.onclick = goLogin;
	closeBtn.onclick = leaveLogin;
	loginForm.children[0].addEventListener('mousedown', dragForm);
	
	// 表单内容不可选，不然看着不舒服
	loginForm.onselectstart = function(e) {
    	e.preventDefault();
	}
	
	// 1、实现小眼睛改变密码输入状态
	function setEye() {
   		if (!eyeFlag) {
        	eyeState.className = 'open';
        	pswInput.type = 'text';
        	eyeFlag = 1;
    	} else {
        	eyeState.className = 'close';
        	pswInput.type = 'password';
        	eyeFlag = 0;
    	}
	}
	
	// 2、外面登录按钮实现表单、遮罩层的显示和它自己隐藏
	function goLogin() {
    	loginBg.style.visibility = 'visible';
    	loginForm.style.display = 'block';
    	this.style.display = 'none';
	}
	
	// 3、关闭按钮实现表单、遮罩层的隐藏和外面登录按钮的显示
	function leaveLogin() {
    	loginBg.style.visibility = 'hidden';
    	loginForm.style.display = 'none';
    	login.style.display = 'block';
	}
	
	// 4、实现表单拖拽效果
	function dragForm(e) {
		// 当鼠标在表单的标题按下时获取它在表单元素内的坐标并绑定移动事件
    	var x = e.pageX - this.parentNode.offsetLeft;
    	var y = e.pageY - this.parentNode.offsetTop;
    	document.addEventListener('mousemove', move);
    	// 鼠标弹起移除移动事件
    	this.addEventListener('mouseup', function() {
        	document.removeEventListener('mousemove', move)
    	});
    	function move(event) {
        	loginForm.style.left = event.pageX - x + 'px';
        	loginForm.style.top = event.pageY - y + 'px';
    }
}