1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="bg" class="login-bg"></div>
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="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-content">
        <div class="login-input">
            <label for="">用户名：</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="username" value="admin">
        </div>
        <div class="login-input">
            <label for="">登录密码：</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="password">
        </div>
    </div>
    <div id="loginBtn" class="login-button">
        <a href="javascript:void(0);" id="login-button-submit"></a>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

点击，弹出登录框

    
会员登录
        关闭
    
    

        

            用户名：
            
        
        

            登录密码：
            
        
    
    

        
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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');
link.addEventListener('click', function() {
    login.style.display = 'block';
    mask.style.display = 'block';
})
closeBtn.addEventListener('click', function() {
    login.style.display = 'none';
    mask.style.display = 'none';
})
// 鼠标按下获得盒子与页面的距离
title.addEventListener('mousedown', function(e) {
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    // 鼠标移动时，得到模态框left与top的值
    document.addEventListener('mousemove', move)
    function move(e) {
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';
    }
    // 鼠标弹起是，清除鼠标移动事件
    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', move)
    })
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX