能夠拖動的彈出層

/*
  彈出層
*/
//彈出層(divbgId背景層ID，conId顯示的內容層ID)
function openLayer(divBgId, divConId) {
    var arrayPageSize   = getPageSize();  //調用getPageSize()函數
    var arrayPageScroll = getPageScroll(); //調用getPageScroll()函數

    //顯示背景層
    var bodyBack = document.getElementById(divBgId);
    bodyBack.style.position = "absolute";
    bodyBack.style.width = "100%";
    bodyBack.style.height = (arrayPageSize[1] + 'px');
    bodyBack.style.zIndex = 999;
    bodyBack.style.top = 0;
    bodyBack.style.left = 0;
    bodyBack.style.filter = "alpha(opacity=50)";
    bodyBack.style.opacity = 0.5;
    bodyBack.style.background = "#ddddff";
    bodyBack.style.display = "block";
   
    //顯示內容層,讓彈出層在頁面中居中顯示(個性)
    var popObj = document.getElementById(divConId);
    var arrayConSize = getConSize(divConId);
    popObj.style.position = "absolute";
    popObj.style.zIndex = 9999;
    popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2 + 'px';
    popObj.style.left = (arrayPageSize[2] - arrayConSize[0]) / 2 + 'px';
    popObj.style.display = "block";
}

//獲取內容層內容原始尺寸
function getConSize(conId)
{
    var conObj = document.getElementById(conId);
    var w = parseInt(conObj.style.width);
    var h = parseInt(conObj.style.height);
    var arrayConSize = [w, h];
    return arrayConSize;
}
//獲取滾動條的高度
function getPageScroll(){
    var yScroll;
    if (self.pageYOffset)
    {
        yScroll = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
    {
        yScroll = document.documentElement.scrollTop;
    }
    else if (document.body)
    {
        yScroll = document.body.scrollTop;
    }
    arrayPageScroll = new Array('', yScroll)

    return arrayPageScroll;
}
//獲取頁面實際大小
function getPageSize(){
    var xScroll,yScroll;
    if (window.innerHeight && window.scrollMaxY)
    {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    }
    else if (document.body.scrollHeight > document.body.offsetHeight)
    {
        sScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    }
    else {
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth,windowHeight;
    if (self.innerHeight) {
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    }
    else if (document.documentElement  &&  document.documentElement.clientHeight) {
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    }
    else if (document.body) {
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    var pageWidth,pageHeight
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    }
    else {
        pageHeight = yScroll;
    }
    if(xScroll < windowWidth) {
        pageWidth = windowWidth;
    }
    else {
        pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)

    return arrayPageSize;
}

//關閉彈出層
function closeLayer(divBgId, divConId) {
    document.getElementById(divConId).style.display = "none";
    document.getElementById(divBgId).style.display = "none";
    //document.getElementById(divBgId).style.width = "0px";
    //document.getElementById(divBgId).style.height = "0px";
    return false;
}
   
/*
* 拖拽效果
*/
var oldX, oldY;  // 記錄鼠標移動事件發生前鼠標的位置
var dragElem;  // 記錄被拖曳的對象
var drag = false;
function $(nodeId) {
    return document.getElementById(nodeId);
}
// 拖動開始
function StartDrag(evt, nodeId) {
    //dragElem = $("divInfo");
    dragElem = $(nodeId);
    evt = evt || event;   // 爲了兼容IE和firefox，firefox執行evt，IE則執行evt=event
    oldX = evt.clientX - parseInt(dragElem.style.left);
    oldY = evt.clientY - parseInt(dragElem.style.top);
    drag = true;
    document.onmousemove = Drag;
}
// 拖動的動做
function Drag(evt) {
    if (drag == true) {
        // 爲了兼容IE和firefox，firefox執行evt，IE則執行evt=event
        evt = evt || window.event;  
        dragElem.style.top = (evt.clientY - oldY) + 'px';
        dragElem.style.left = (evt.clientX - oldX) + 'px';
    }
}
// 拖曳結束，釋放onmousemove事件執行函數
function StopDrag() {
    drag = false;
}

例：

<div id="divBg" style="display: none;"></div>

<div id="divInfo" style="width: 500px; height: 200px; border: 1px solid #ff000; background-color: #ffffff;
            display: none;">
            <table cellpadding="0" cellspacing="0" style="width: 500px; height: 200px; border: 1px solid #c3d9ff;
                border-collapse: collapse;">
                <tr>
                    <td colspan="2" class="formtable_title_td" style="background-color: #c3d9ff;" onmouseover="this.style.cursor='move';"
                        onmouseout="this.style.cursor='';" onmousedown="StartDrag(event,'divInfo');"
                        onmousemove="Drag(event);" onmouseup="StopDrag();">
                        <div style="margin-top: 0px;">
                            修改密碼</div>
                        <img id="imgClose" src="../../Images/mainFrame/win_close.gif" alt="關閉" style="width: 15px;
                            height: 15px; float: right; margin-right: 15px; margin-top: -15px; cursor: hand;"
                            onclick='closeLayer("divBg", "divInfo")' />
                    </td>
                </tr>
                <tr>
                    <td class="formtable_head_td" width="25%">
                        用戶名：
                    </td>
                    <td class="formtable_body_content_td" style="height: 34px">
                        <asp:TextBox ID="txtUserName" runat="server" CssClass="formtable_body_input_text0"
                            Width="200px" MaxLength="20"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="formtable_head_td">
                        密&nbsp;&nbsp;碼：
                    </td>
                    <td class="formtable_body_content_td" style="height: 29px">
                        <asp:TextBox ID="txtPassword" runat="server" CssClass="formtable_body_input_text0"
                            Width="200px" MaxLength="20"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="formtable_head_td" height="40px">
                    </td>
                    <td class="formtable_body_submit_td" style="background-color: #ffffff;">
                        <asp:Button ID="btnAdd" runat="server" CssClass="btn_3words" Text="保存" OnClick="btnAdd_Click">
                        </asp:Button>&nbsp;
                        <input class="btn_3words" type="button" value="取消" onclick='closeLayer("divBg", "divInfo")' />
                    </td>
                </tr>
            </table>

顯示是調用openLayer('divBg','divInfo');