jquery 弹出可拖动form

;(
    function($) {
        var DragPanelId = "divContext";
        var _idiffx = 0;
        var _idiffy = 0;
        var _Div = null;
        $.extend({

            AttachDrag: function(dragId) {
                if (dragId)
                    $._Div = document.getElementById(dragId);
                else
                    $._Div = document.getElementById($.DragPanelId);
                document.body.onmousedown = $._handleMouseDown;

            },
            _handleMouseDown: function() {
                var oEvent = window.event;
                if ($._Div) {
                    $._idiffx = oEvent.clientX - $._Div.offsetLeft;
                    $._idiffy = oEvent.clientY - $._Div.offsetTop;
                    document.body.onmousemove = $._handleMouseMove;
                    document.body.onmouseup = $._handleMouseUp;
                }
            },
            _handleMouseMove: function() {
                var oEvent = window.event;
                $._Div.style.left = oEvent.clientX - $._idiffx;
                $._Div.style.top = oEvent.clientY - $._idiffy;
                $._Div.style.cursor = "move";
            },
            _handleMouseUp: function() {
                document.body.onmousemove = null;
                document.body.onmouseup = null;
                $._Div.style.cursor = "default";
            }
        });
    }
)(jQuery)

;(
function($){

var divW;//div的高度
var divH;//div宽度
var clientH;//浏览器高度
var clientW//浏览器宽度
var divTitle;
var pageUrl;
var div_X;
var div_Y;

$.extend({
//清除背景锁定
clearLockScreen: function() {
    $("#divLock").remove();
},

//清除DIV窗口
clearDivWindow: function() {
    $("#divWindow").remove();
},
 lockScreen:function(){
 if($("#divLock").length==0){
    clientH = $(window).height(); //浏览器高度
        clientW = $(window).width(); //浏览器宽度
        $("body").append("<div id='divLock'></div>")    //增加DIV
        $("#divLock").height(clientH);
        $("#divLock").width(clientW);
        $("#divLock").css("display", "block");
        $("#divLock").css("background-color", "#000000");
        $("#divLock").css("position", "fixed");
        $("#divLock").css("z-index", "100");
        $("#divLock").css("top", "0px");
        $("#divLock").css("left", "0px");
        $("#divLock").css("opacity", "0.5");
 }
 else
 {
    clientH =$(window).height();
    clientW=$(window).width();
    $("#divLock").height(clientH);
    $("#divLock").width(clientW);
 
 }
 }
 ,
 divOpen:function(){
    var minTop = 80; //弹出的DIV记顶部的最小距离
    if ($("#divWindow").length == 0) {
        clientH = $(window).height(); //浏览器高度
        clientW = $(window).width(); //浏览器宽度
        div_X = (clientW - divW) / 2; //DIV横坐标
        div_Y = (clientH - divH) / 2; //DIV纵坐标
        div_X += window.document.documentElement.scrollLeft; //DIV显示的实际横坐标
        div_Y += window.document.documentElement.scrollTop; //DIV显示的实际纵坐标
        if (div_Y < minTop) {
            div_Y = minTop;
        }
        $("body").append("<div id='divWindow'><div id='divTitle'><img src='images/Close-1.gif' id='x' /></div><div id='divContent'>载入中...</div></div>"); //增加DIV
        //divWindow的样式
        $("#divWindow").css("position", "absolute");
        $("#divWindow").css("z-index", "200");
        $("#divWindow").css("left", (div_X + "px")); //定位DIV的横坐标
        $("#divWindow").css("top", (div_Y + "px")); //定位DIV的纵坐标
        $("#divWindow").css("opacity", "0.9");
        $("#divWindow").width(divW);
        $("#divWindow").height(divH);
        $("#divWindow").css("background-color", "#FFFFFF");
        $("#divWindow").css("border", "solid 1px #333333");
        //divTitle的样式
        $("#divTitle").css("height", "20px");
        $("#divTitle").css("line-height", "20px");
        $("#divTitle").css("background-color", "#333333");
        $("#divTitle").css("padding", "3px 5px 1px 5px");
        $("#divTitle").css("color", "#FFFFFF");
        $("#divTitle").css("font-weight", "bold");
        //x的样式
        $("#x").css("float", "right");
        $("#x").css("cursor", "pointer");
        //divContent的样式
        $("#divContent").css("padding", "10px");
    }
    else {
        clientH = $(window).height(); //浏览器高度
        clientW = $(window).width(); //浏览器宽度
        div_X = (clientW - divW) / 2; //DIV横坐标
        div_Y = (clientH - divH) / 2; //DIV纵坐标
        div_X += window.document.documentElement.scrollLeft; //DIV显示的实际横坐标
        div_Y += window.document.documentElement.scrollTop; //DIV显示的实际纵坐标
        if (div_Y < minTop) {
            div_Y = minTop;
        }
        $("#divWindow").css("left", (div_X + "px")); //定位DIV的横坐标
        $("#divWindow").css("top", (div_Y + "px")); //定位DIV的纵坐标
    }
 }
 ,
  alterBgColor:function(){
       
   
       $("tbody>tr").hover(
       function(){
        $(this).css("background-color","#E8E8E8");
       },
       function(){
        $(this).css("background-color","white");

       }
       )

    },
    ShowForm:function(divWidth,divHeight,title,url,json){
    divW= divWidth;
    divH= divHeight;
    divTitle = title;
    pageUrl = url;
    $.lockScreen();
    $.divOpen();
    $("#divTitle").append(divTitle);
    $("#divContent").load(pageUrl,json,function(){
    $.AttachDrag("divWindow");
    $.alterBgColor();
    });

        $("#x").hover(
   
        function() {
            $(this).attr("src", "images/Close-2.gif");
        },
        function() {
            $(this).attr("src", "images/Close-1.gif");
        }
                );
    $("#x").click(
        function() {
            $.clearDivWindow();
            $.clearLockScreen();
        });
            $(window).resize(
                function() {
                    if ($("#divLock").length != 0) {
                        $.lockScreen();
                    }
                    if ($("#divWindow").length != 0) {
                        $.divOpen();
                    }
                }
        );
       
  }

});
}
)(jQuery)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/ShowForm.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $("#show").click(function () {

                $.ShowForm(500, 320, '封装全局函数的插件Demo', 'ShowItem.aspx', {name:"zhangshan"});
            })



        })
    
    </script>

</head>
<body>
<input type="button" value="点击演示"  id="show"/>
</body>
</html>