可拖拽的登陆弹窗

练习制作的一个可拖拽的登陆弹窗

• 点击页面头部登陆按钮，弹出登陆弹窗和遮罩，并禁用滚动条；
• 点击弹窗里的关闭按钮，关闭登陆弹窗和遮罩，并还原滚动条；
• 弹窗可以在视口区域任意位置拖动，但是不可移出浏览器边缘；
• 不管关闭前弹窗移动到任何位置，每次点击登录打开弹窗都在视口上下左右居中显示；
• 当弹窗居于浏览器视口右边缘或者下边缘时，调整浏览器大小时弹窗也不会超出浏览器边缘，会始终贴着右边缘或者下边缘；
  效果图如下:

初始效果-带滚动条

点击登录-弹窗&遮罩

可拖动-不会拖到浏览器视口外

html部分

登陆

登陆弹窗X

用户名：

密码：

登录

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

css部分

/*头部*/
* {margin:0; padding:0; }
body {font-size:14px; color:#333; position: relative; }
.header {width: 980px; height:50px; margin: 0 auto; background-color: #efefef; border-radius: 0 0 5px 5px; }
.header .logo {float:left; }
.header .logo img {height: 50px; }
.login{float: right; margin: 15px; cursor: pointer; }
/*遮罩*/
#mask{z-index: 9; background-color: #000; opacity:0.3; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; }
/*登陆弹窗*/
#login-pop{z-index: 10; width: 300px; height: 230px; background-color: #fff; position: absolute; text-align: center; display: none; }
#login-pop h2 {height:50px; line-height:50px; text-align:center; font-size:16px; letter-spacing:5px; color:#666; border-bottom:1px solid #ccc; margin:0 0 30px 0; position: relative; cursor: move; }
#login-pop .close{position: absolute; right: 10px; cursor: pointer; }
#login-pop .field{margin-bottom: 20px; }
#login-pop .field label{width: 60px; text-align: right; display: inline-block; }
#login-pop #loginbtn{width: 100px; height: 40px; line-height: 40px; background-color: green; border: none; color: #fff; font-size: 16px; border-radius: 5px; cursor: pointer; }

• 弹窗的绝对定位的位置坐标是通过js实现的；

js部分

var 
//获取登陆弹窗div——loginPop
//获取弹窗的头部h2——move
loginPop = document.getElementById("login-pop"),
move = document.getElementsByTagName("h2")[0];
//给move添加鼠标按下事件
move.addEventListener("mousedown",function (e) {
    //获取事件触发时按下点距浏览器当前窗口的水平坐标(e.clientX)和垂直坐标(e.clientX)
    //以及此时登陆弹窗左边缘和上边缘距浏览器左边缘和上边缘的距离offsetLeft和offsetTop
    //计算得到鼠标按下点距登陆弹窗左边缘和上边缘的距离diffX、diffY
    var diffX = e.clientX - loginPop.offsetLeft,
        diffY = e.clientY - loginPop.offsetTop;
    //利用IE独有的方法setCapture，鼠标按下时捕获鼠标移出浏览器的事件
    //配合下面releaseCapture，鼠标弹起时释放
    //解决IE在限制弹窗移出浏览器失效的bug
    if (typeof loginPop.setCapture != 'undefined') {
        loginPop.setCapture();
    }
    //鼠标在弹窗头部按下时，给document添加鼠标移动事件
    //从而让弹窗可以在document范围内移动
    document.addEventListener("mousemove",mousemove); 
    function mousemove(e) {
        //实时获取鼠标移动事件触发时按住点距浏览器当前窗口的水平坐标(e.clientX)和垂直坐标(e.clientX)
        //根据上面计算得到的diffX、diffY
        //计算移动后登陆弹窗位置参数left、top
        var left = e.clientX - diffX;
        var top = e.clientY - diffY;
        //当登陆弹窗移出浏览器左边缘时left<0，
        //当弹窗移出浏览器右边缘时left > getInner().width - loginPop.offsetWidth
        //限制弹窗移出浏览器左右边缘
        // 上下边缘同理
        if (left < 0) {
            left = 0;
        } else if (left > getInner().width - loginPop.offsetWidth) {
            left = getInner().width - loginPop.offsetWidth;
        }               
        if (top < 0) {
            top = 0;
        } else if (top > getInner().height - loginPop.offsetHeight) {
            top = getInner().height - loginPop.offsetHeight;
        }
        loginPop.style.left = left + 'px';
        loginPop.style.top = top + 'px';
    }
    // 给document添加鼠标弹起事件
    // 鼠标弹起时移出鼠标的移动事件和弹起事件自身
    // 鼠标弹起时弹窗停止在当前位置
    document.addEventListener("mouseup",mouseup);
    function mouseup() {
        document.removeEventListener("mousemove",mousemove);
        document.removeEventListener("mouseup",mouseup);
        //配合上面的setCapture
        if (typeof loginPop.releaseCapture != 'undefined') {
            loginPop.releaseCapture();
        }
    }
});
// 浏览器的window添加窗口大小的监听事件
// 当浏览器大小变化时，判断弹窗当前位置是否超出浏览器的右边缘或者下边缘
// 当超出时强制赋值使其定位在浏览器边缘
window.addEventListener("resize",fn);
function fn() {
    if (loginPop.offsetLeft > getInner().width - loginPop.offsetWidth) {
        loginPop.style.left = getInner().width - loginPop.offsetWidth + 'px';
    }
    if (loginPop.offsetTop > getInner().height - loginPop.offsetHeight) {
        loginPop.style.top = getInner().height - loginPop.offsetHeight + 'px';
    }
};  
// 遮罩
// 获取头部的登陆按钮login，弹窗的关闭按钮close、遮罩div mask
var login = document.getElementsByClassName("login")[0],
    close = document.getElementsByClassName("close")[0],
    mask = document.getElementById("mask");
// 头部的登陆按钮添加点击事件
login.addEventListener("click",function(){ 
    // 设置弹窗居中
    center(300,230);
    // 显示遮罩
    mask.style.display = "block";
    // 显示弹窗 
    loginPop.style.display = "block";
    // 禁用滚动条
    document.documentElement.style.overflow = 'hidden';
});
// 弹窗的关闭按钮点击事件
close.addEventListener("click",function(){ 
    // 隐藏遮罩和登陆弹窗
    mask.style.display = "none"; 
    loginPop.style.display = "none"; 
    // 还原滚动条默认状态
    document.documentElement.style.overflow = 'auto';
}); 
// 登陆弹窗居中，两个参数分别是弹窗的宽高
function center(width, height) {
    //通过浏览器的视口大小减去弹窗大小后除以2确定弹窗的绝对定位位置参数top、left
    var top = (getInner().height - height) / 2,
        left = (getInner().width - width) / 2;
    loginPop.style.top = top + 'px';
    loginPop.style.left = left + 'px';
}
//跨浏览器获取视口大小
function getInner() {
    //非IE浏览器，支持innerWidth、innerHeight
    if (typeof window.innerWidth != 'undefined') { 
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {
        //IE浏览器，不支持innerWidth、innerHeight
        //支持documentElement.clientWidth、documentElement.clientHeight
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}
};