可拖动，ModalPopup

/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("DDT");

DDT.Loading = function(element) {
    DDT.Loading.initializeBase(this, [element]);
    this.ClassName="";
}

DDT.Loading.prototype = {
    initialize: function() {
        DDT.Loading.callBaseMethod(this, 'initialize');
        //背景
        this.bgDiv = document.createElement("div");
        Sys.UI.DomElement.addCssClass(this.bgDiv,this.ClassName);
        this.bgDiv.style.zIndex = 100;
        Sys.UI.DomElement.setLocation(this.bgDiv,0,0);
        Sys.UI.DomElement.setVisible(this.bgDiv,true);
        document.body.appendChild(this.bgDiv);
        //背景结束       
        this.get_element().style.zIndex = 101;        
        $addHandler(window,"resize",Function.createDelegate(this,this._resize));
        $addHandler(window,"scroll",Function.createDelegate(this,this._resize));
        $addHandler(document,"mouseup",Function.createDelegate(this,this._mouseupHandler));
        this._resize();
        $addHandler(this.get_element(),"mousedown",Function.createDelegate(this,this._downHandler))
        // Add custom initialization here
    },
    _mouseupHandler:function(){
        if(this._mouseMoveDelegate){ 
            $removeHandler(document,"mousemove",this._mouseMoveDelegate);
            delete this._mouseMoveDelegate;
        }       
    },
    _resize:function(){
        var x = (document.documentElement.clientWidth)/2-Sys.UI.DomElement.getBounds(this.get_element()).width/2+document.documentElement.scrollLeft;
        var y = (document.documentElement.clientHeight-Sys.UI.DomElement.getBounds(this.get_element()).height)/2+document.documentElement.scrollTop;
        x = Math.round(x);
        y = Math.round(y);
        Sys.UI.DomElement.setLocation(this.get_element(),x,y);
        this.bgDiv.style.width = Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth) + "px";
        this.bgDiv.style.height = Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight) + "px";
    },
    _downHandler:function(e){
        this._mouseupHandler();
        if(!e) e= window.event;
        this.posX = e.clientX - Sys.UI.DomElement.getLocation(this.get_element()).x;
        this.posY = e.clientY - Sys.UI.DomElement.getLocation(this.get_element()).y;
        this._mouseMoveDelegate = Function.createDelegate(this,this._mousemoveHandler);
        $addHandler(document,"mousemove",this._mouseMoveDelegate);
    },
    _mousemoveHandler:function(e){
        if(!e) e = window.event;
        var x = e.clientX - this.posX;
        var y = e.clientY - this.posY;
        Sys.UI.DomElement.setLocation(this.get_element(),x,y);
    },
    dispose: function() {        
        //Add custom dispose actions here
        DDT.Loading.callBaseMethod(this, 'dispose');
    }
}
DDT.Loading.registerClass('DDT.Loading', Sys.UI.Behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

使用方法：

     <script type="text/javascript">
    
      function pageLoad() {
      $create(DDT.Loading,{"ClassName":"modalBackground"},null,null,$get("lixi"));
      }
    
    </script>
    <style type="text/css">
<!--
.modalBackground {    FILTER: alpha(opacity=70);    BACKGROUND-COLOR: gray;    opacity: 0.7}
-->
</style>

 <div id="lixi" style="width:200px;">
   <table width="200" border="1" bgcolor="#FFFFFF">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
    </div>