最近在项目中，用到了模态对话框，实现了该功能。

现把jQuery实现的代码共享出来。

下面是该完整代码：

<script language="javascript">
        var modal;
    var fx = {
        "initModal":function(width){
            if($(".modal-window").length==0){
                var moveFlag = false;
                return $("<div>").mousedown(function(event){
                    moveFlag = true;
                    var yPos=parseInt($(this).css('top'));
                    var xPos=parseInt($(this).css('left'));
                    var x = event.clientX;
                    var y = event.clientY;
                    $(this).mousemove(function(event){
                        if(moveFlag==true){
                            x1 = event.clientX;
                            y1 = event.clientY;
                            var curX = xPos+x1-x;
                            var curY = yPos+y1-y;
                            $(this).css('top',curY+'px').css('left',curX+'px');
                        }
                    })                                      
                }).mouseup(function(event){
                    moveFlag = false;                           
                }).addClass("modal-window").css("width",width+"px").css("margin-left","-"+width/2+"px").appendTo("body");   
            }else{
                return $(".modal-window").css("width",width+"px");
            }               
        },
        "addCloseButton":function(fx){
            $("<span>").addClass("modal-close-btn").html("").click(function(event){
                    fx.boxOut();
            })
            .appendTo($(".modal-window"));
        },
        "boxOut":function(event){
            $(".modal-window,.modal-overlay").fadeOut("slow",function(event){
                $(this).remove();               
            });
        },
        "boxIn":function(data,modal){           
            $("<div>").hide().addClass("modal-overlay").click(function(event){
                fx.boxOut(event);
            }).appendTo("body");
             
            modal.hide().html(data).appendTo("body");
            $(".modal-window,.modal-overlay").fadeIn("slow");
        }
    };
</script>

将该代码放在要使用模态窗口的页面里，再嵌入下面CSS代码：

<style type="text/css">
.modal-window {
    position:absolute;
    top: 140px;
    left: 50%;
    width:300px;
    height: auto;
    margin-left: -150px;
    padding:0px;
    border: 1px solid #000;
    background-color:#fff;
    z-index:5;
    display:none;
}
.modal-close-btn{
    position:absolute;
    top:8px;
    right:8px;
    margin:0;
    padding:0;
    width:15px;
    height:14px;
    color:#000000;
    background-image:url(../../images/close.gif);
    background-repeat:no-repeat;
    cursor:hand;
}
.modal-overlay{
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    position:absolute;
    background-color: rgba(0,0,0,.4);
    z-index:4;
}
</style>

下面是简单的调用代码：

<script language="javascript">
modal = fx.initModal("720");        
var data = "<table width=100% border=0 cellspacing=1 cellpadding=0 class=input_bluetable><tr><td width=100%>"+obj.alt+"</td></tr>  <tr><td><img src="+obj.src+" width=720 height=576></td></tr></table>";
fx.boxIn(data,modal);
fx.addCloseButton(fx);
</script>

说明：

modal = fx.initModal("720"); 初始话对像，并设定好宽度

var data = "";初始化对话框的内容

fx.boxIn(data,modal); 显示对话框

fx.addCloseButton(fx);显示关闭按钮

在css中使用了关闭按钮，该按钮使用了图片，该图片没有提供，可以根据自己需要修改。