<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">關(guān)閉</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);
?? ?
?? ?// 表單內(nèi)容不可選，不然看著不舒服
?? ?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、關(guān)閉按鈕實現(xiàn)表單、遮罩層的隱藏和外面登錄按鈕的顯示
?? ?function leaveLogin() {
? ? ?? ?loginBg.style.visibility = 'hidden';
? ? ?? ?loginForm.style.display = 'none';
? ? ?? ?login.style.display = 'block';
?? ?}
?? ?
?? ?// 4、實現(xiàn)表單拖拽效果
?? ?function dragForm(e) {
?? ??? ?// 當鼠標在表單的標題按下時獲取它在表單元素內(nèi)的坐標并綁定移動事件
? ? ?? ?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';
? ? }
}

分析