SOURCE

function g(id) {
    return document.getElementById(id);
}
//dialog 水平垂直居中
function autoCenter(elem) {
    elem.style.display = "block";
    var bodyWidth = document.documentElement.clientWidth;
    var bodyHeight = document.documentElement.clientHeight;

    var eleWidth = elem.offsetWidth;
    var elemHeight = elem.offsetHeight;

    elem.style.left = (bodyWidth - eleWidth) / 2 + "px";
    elem.style.top = (bodyHeight - elemHeight) / 2 + "px";
}
function fillBody(mask) {
    mask.style.width = document.documentElement.clientWidth + "px";
    mask.style.height = document.documentElement.clientHeight + "px";
}
function showDialog() {
    var oMask = g("mask"),
    oDialogMove = g("dialogMove");
    oMask.style.display = 'block';
    //autoCenter
    autoCenter(oDialogMove);
    //mask
    fillBody(oMask);
}

function closeDialog() {
    var oMask = g("mask"),
    oDialogMove = g("dialogMove");
    oMask.style.display = "none";
    oDialogMove.style.display = "none";
}

var offsetX = 0,
//被拖拽物件X方向初始化值
offsetY = 0,
//被拖拽物件Y方向初始化值
draging = false,
//标识鼠标按下操作
onMoveStartId = null;

//mousedown
g('dialogHeader').addEventListener("mousedown",
function(event) {
    event = event || window.event;
    event.preventDefault();
    offsetX = event.clientX - g('dialogMove').offsetLeft;
    offsetY = event.clientY - g('dialogMove').offsetTop;
    draging = true;
});
//mousemove
g('dialogMove').addEventListener("mousemove",
function(event) {
    event = event || window.event;
    event.preventDefault(); //阻止默认事件onselectstart
    if (draging === true) {
        setTimeout(function() {
            onMoveStart(event);
        },
        25);
        return false;
    }
})

//开始移动
function onMoveStart(event) {
    event.stopPropagation && event.stopPropagation();
    event.preventDefault;
    var mouseX = 0;
    mouseY = 0;
    mouseX = event.clientX - offsetX;
    mouseY = event.clientY - offsetY;
    //防止mouseX/mouseY 为负数情况
    mouseX = Math.max(0, mouseX);
    mouseY = Math.max(0, mouseY);

    //拖拽范围限定 moveX > 0 且  可视区域的宽度-弹出层的宽度（pageWidth - dialogWidth）
    //            moveY > 0 且 可视区域的高度-弹出层的高度（pageHeight - dialogHeight）
    var maxX = document.documentElement.offsetWidth - g("dialogMove").offsetWidth;
    var maxY = document.documentElement.offsetHeight - g("dialogMove").offsetHeight;
    maxX = Math.min(mouseX, Math.max(0, maxX));
    maxY = Math.min(mouseY, Math.max(0, maxY));
    g('dialogMove').style.left = maxX + "px";
    g('dialogMove').style.top = maxY + "px";
}
//mouseup
document.addEventListener("mouseup",
function(event) {
    event = event || window.event;
    draging = false;
    clearInterval(onMoveStartId);
});
//显示弹窗
showDialog();
//监听浏览器窗体的变化
window.onresize = function() {
    showDialog();
};

<div class="link">
    <a href="javascript:showDialog()">
        登陆
    </a>
</div>
<div class="ui-mask" id="mask">
</div>
<div class="ui-dialog" id="dialogMove" onselectstart="return false;">
    <div class="ui-dialog-header" id="dialogHeader" onselectstart="return false;">
        百度登陆首页
        <a href="javascript:closeDialog()" class="ui-dialog-closebtn">
            ✘
        </a>
    </div>
    <div class="ui-dialog-content">
        <div class="ui-dialog-l40 ui-dialog-pt15">
            <input class="ui-dialog-input ui-dialog-username" type="text" name="username"
            placeholder="用户名/邮箱地址" />
        </div>
        <div class="ui-dialog-l40 ui-dialog-pt15">
            <input class="ui-dialog-input ui-dialog-passworld" type="text" name="passworld"
            placeholder="用户密码" />
        </div>
        <div class="ui-dialog-l40">
            <a href="#none">
                忘记密码
            </a>
        </div>
        <div>
            <a href="#none" class="ui-dialog-loginbtn">
                登陆
            </a>
        </div>
        <div class="ui-dialog-l40">
            <a href="#none">
                立即注册
            </a>
        </div>
    </div>
</div>

@charset "utf-8";

/* CSS Document */

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: url(../img/baidu_demo.png) #fff no-repeat top center;
    font-family: "微软雅黑";
    font-size: 16px;
    position: relative;
}

.link {
    text-align: right;
    padding-right: 20px;
    line-height: 20px;
}

.link a {
    text-decoration: none;
    color: #000;
}

.ui-mask {
    position: absolute;
    top: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, .75);
    opacity: 0.75;
    filter: Alpha(opacity=75);
    display: none;
}

.ui-dialog {
    width: 380px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    display: block;
}

.ui-dialog-header {
    background-color: #f7f7f7;
    border: solid 1px #ddd;
    height: 45px;
    padding: 0 15px;
    line-height: 45px;
    position: relative;
    cursor: move;
}

.ui-dialog-closebtn {
    display: block;
    position: absolute;
    height: 16px;
    line-height: 16px;
    width: 16px;
    right: 12px;
    top: 15px;
    text-decoration: none;
    text-align: center;
    color: #ccc;
    font-size: 12px;
    border: solid 1px #ccc;
    border-radius: 16px;
}

.ui-dialog-closebtn:hover {
    background: url(../img/close_hov.png) no-repeat left top;
}

.ui-dialog-header p {
    margin: 0;
    padding: 0;
    padding: 0 15px;
}

.ui-dialog-content {
    border-style: solid;
    border-width: 0 1px 1px;
    border-color: #ddd;
    padding: 0 15px 20px;
    background-color: #FFFFFF;
    text-align: right;
}

.ui-dialog-l40 {
    height: 40px;
    line-height: 40px;
}

.ui-dialog-input {
    display: inline-block;
    width: 100%;
    height: 35px;
    outline: 0;
    border: solid 1px #ddd;
    text-indent: 32px;
    font-family: inherit;
}

.ui-dialog-input:active,
.ui-dialog-input:focus {
    border: solid 1px #0060ff;
}

.ui-dialog-username {
    background: url(../img/input_username.png) no-repeat 2px center;
}

.ui-dialog-passworld {
    background: url(../img/input_password.png) no-repeat 2px center;
}

.ui-dialog-pt15 {
    padding-top: 15px;
}

.ui-dialog-pt20 {
    padding-top: 20px;
}

.ui-dialog-loginbtn {
    text-decoration: none;
    color: #fff;
    text-align: center;
    display: block;
    height: 40px;
    line-height: 40px;
    background-color: #3b7ae3;
}

.ui-dialog-loginbtn:hover {
    background-color: #347ef9;
}

.ui-dialog-content a {
    text-decoration: none;
    font-size: 12px;
}