<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/模態(tài)框.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、實現(xiàn)小眼睛改變密碼輸入狀態(tài)
?? ?function setEye() {
? ??? ??? ?if (!eyeFlag) {
? ? ? ? ?? ?eyeState.className = 'open';
? ? ? ? ?? ?pswInput.type = 'text';
? ? ? ? ?? ?eyeFlag = 1;
? ? ?? ?} else {
? ? ? ? ?? ?eyeState.className = 'close';
? ? ? ? ?? ?pswInput.type = 'password';
? ? ? ? ?? ?eyeFlag = 0;
? ? ?? ?}
?? ?}
?? ?
?? ?// 2、外面登錄按鈕實現(xiàn)表單、遮罩層的顯示和它自己隱藏
?? ?function goLogin() {
? ? ?? ?loginBg.style.visibility = 'visible';
? ? ?? ?loginForm.style.display = 'block';
? ? ?? ?this.style.display = 'none';
?? ?}
?? ?
?? ?// 3、關閉按鈕實現(xiàn)表單、遮罩層的隱藏和外面登錄按鈕的顯示
?? ?function leaveLogin() {
? ? ?? ?loginBg.style.visibility = 'hidden';
? ? ?? ?loginForm.style.display = 'none';
? ? ?? ?login.style.display = 'block';
?? ?}
?? ?
?? ?// 4、實現(xiàn)表單拖拽效果
?? ?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';
? ? }
}

分析