title: Positioning AJAX ModalPopupExtender in the center of the screen problem
body: <p>I have problem with positioning ModalPopupExtender in the center of the screen when it's PopupDragHandleControlID property is set (without this property it works fine ).</p>
  
  <p>ModalPopupExtender is not positioned in the center of the screen.
  I thinks what causes the problem is the page's CSS layout cause when i disable it, popup positioned in the center of the screen (I don't understand why page's css affects ModalPopupExtender only when it's PopupDragHandleControlID property is set  )</p>
  
  <p>Thepage:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
      &lt;link href="layout.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
      &lt;div id="header"&gt;
      &lt;/div&gt;
  
       &lt;div id="container"&gt;
         &lt;div id="center" class="column"&gt;                    
  
            &lt;div id="centercolcontent" class="centercolcontent"&gt;    
              &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
          &lt;/asp:ScriptManager&gt;
  
  
          &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server" &gt;
              &lt;ContentTemplate&gt;
                  &lt;asp:Button ID="btnShowPopup" runat="server" Text="Open" /&gt;   
                  &lt;asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader"   style="display: none;"&gt;
                      &lt;cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup"
                                  PopupControlID="pnlUploader" CancelControlID="btnCancel"
                                  BackgroundCssClass="modalBackground"
                                  PopupDragHandleControlID="pnlUploader" RepositionMode="RepositionOnWindowResize"   /&gt;
                      &lt;div id="pnlDragMe" class="pnlDragMe"&gt;
                          Image Uploader
                       &lt;/div&gt;     
  
                       &lt;div class="upload" id="upload"&gt;             
                           &lt;div id="status" class="info"&gt;
                             Please select a file to upload
                           &lt;/div&gt;
                          &lt;div class="commands"&gt;      
                           &lt;asp:Button ID="btnUpload" runat="server"  Text="Upload" 
                               OnClientClick="javascript:onUploadClick()" /&gt;
                           &lt;asp:Button ID="btnCancel" runat="server" Text="Cancel" /&gt;
                        &lt;/div&gt;        
                     &lt;/div&gt;                                      
                  &lt;/asp:Panel&gt;    
  
              &lt;/ContentTemplate&gt;   
           &lt;/asp:UpdatePanel&gt;
            &lt;/div&gt;
  
         &lt;/div&gt;
  
        &lt;/div&gt;               
        &lt;div id="left" class="column"&gt;
        &lt;/div&gt;
  
        &lt;div id="right" class="column"&gt;                        
        &lt;/div&gt;          
  
      &lt;div id="footer"&gt;
  
      &lt;/div&gt;
  
  
  
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>body
  {
      min-width: 630px; 
  }
  
  #container
  {
      padding-left: 200px; 
      padding-right: 150px; 
  }
  
  #container .column
  {
      position: relative;
      float: left;
  }
  
  #center
  {
      padding: 0px 0px; 
      width: 100%;
  }
  
  #left
  {
      width: 200px; 
      padding: 0 0px 0 0; 
      right: 200px;
      margin-left: -100%;
  }
  
  #right
  {
      width: 130px;
      padding: 0 10px; 
      margin-right: -100%;
  }
  
  #footer
  {
      clear: both;
  }
  
  
  * html #left
  {
      left: 150px; /* RC fullwidth */
  }
  
  /*** Equal-height Columns ***/
  
  #container
  {
      overflow: hidden;
  }
  
  #container .column
  {
      padding-bottom: 1001em; /* X + padding-bottom */
      margin-bottom: -1000em; /* X */
  }
  
  
  
  * html body
  {
      overflow: hidden;
  }
  
  * html #footer-wrapper
  {
      float: left;
      position: relative;
      width: 100%;
      padding-bottom: 10010px;
      margin-bottom: -10000px;
      background: #FFF; /*** Same as body background ***/
  }
  
  
  
  body
  {
      margin: 0;
      padding: 0;
  }
  
  #header, #footer
  {
      font-size: large;
      text-align: center;
      padding: 0.3em 0;
  }
  
  #left
  {
      /*background: #66F;*/
  }
  
  #center
  {
      background: #DDD;
  }
  
  
  
  .modalBackground
  {
      background-color: Gray;
      filter: alpha(opacity=70);
      opacity: 0.7;
  }
  </code></pre>