在屏幕中心定位AJAX ModalPopupExtender問題

當PopupDragHandleControlID屬性被設置（沒有這個屬性時它工作正常），我在屏幕中心定位ModalPopupExtender時遇到了問題。在屏幕中心定位AJAX ModalPopupExtender問題

ModalPopupExtender並不位於屏幕的中心。我認爲是什麼原因導致的問題是頁面的CSS佈局的原因，當我禁用它，放置在屏幕中央彈出（我不明白爲什麼頁面的CSS影響ModalPopupExtender只有當它的PopupDragHandleControlID屬性設置）

翻動書頁：

<!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 runat="server"> 
    <title>Untitled Page</title> 
    <link href="layout.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <div id="header"> 
    </div> 

    <div id="container"> 
     <div id="center" class="column">      

      <div id="centercolcontent" class="centercolcontent">  
      <asp:ScriptManager ID="ScriptManager1" runat="server"> 
     </asp:ScriptManager> 


     <asp:UpdatePanel ID="UpdatePanel1" runat="server" > 
      <ContentTemplate> 
       <asp:Button ID="btnShowPopup" runat="server" Text="Open" /> 
       <asp:Panel ID="pnlUploader" runat="server" CssClass="pnlUploader" style="display: none;"> 
        <cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup" 
           PopupControlID="pnlUploader" CancelControlID="btnCancel" 
           BackgroundCssClass="modalBackground" 
           PopupDragHandleControlID="pnlUploader" RepositionMode="RepositionOnWindowResize" /> 
        <div id="pnlDragMe" class="pnlDragMe"> 
         Image Uploader 
        </div>  

        <div class="upload" id="upload">    
         <div id="status" class="info"> 
          Please select a file to upload 
         </div> 
         <div class="commands">  
         <asp:Button ID="btnUpload" runat="server" Text="Upload" 
          OnClientClick="javascript:onUploadClick()" /> 
         <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> 
         </div>   
        </div>          
       </asp:Panel>  

      </ContentTemplate> 
     </asp:UpdatePanel> 
      </div> 

     </div> 

     </div>    
     <div id="left" class="column"> 
     </div> 

     <div id="right" class="column">       
     </div>   

    <div id="footer"> 

    </div> 




    </div> 
    </form> 
</body> 

</html>

的CSS：

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; 
}

來源

2009-08-28 dani

-1

希望這可以通過兩種方式來實現。

寫CSS類屬性像下面並在 ModalPopupExtender調用類的名稱。

CSS：

.hcenter{margin:0 auto; width:200;} /* I have given a sample width you give the width of your popup */

CODE：

<asp:Panel ID="pnlUploader" runat="server" CssClass="hcenter" style="display: none;"> 
    <cc1:ModalPopupExtender ID="mdlPopup1" runat="server" TargetControlID="btnShowPopup" 
     PopupControlID="pnlUploader" CancelControlID="btnCancel" 
     BackgroundCssClass="modalBackground" 
     PopupDragHandleControlID="pnlUploader" 
     RepositionMode="RepositionOnWindowResize" />

...

嘗試在面板HorizontalOffset財產。

來源

2009-08-29 11:09:09

它沒有幫助。只有HorizontalAlign屬性，它是面板的內容。 – dani 2009-08-29 14:12:49

使用x和ModalPopupExtender Y的屬性。

來源

2011-05-04 16:14:07 Xs10tial

這正是我需要的！謝謝@ Xs10tial！ – MikeC 2014-09-10 15:25:53

這是正確的答案，ty – 2015-01-27 11:43:44

這花了我frickin年齡段制定出了我的情況，但最終所有我需要做的就是改變我從100％延伸到一個固定的高度比面板大面板的高度。

<asp:Panel ID="pnlUploader" Width="500px"...

我也有我的擴展在面板外，但懷疑是否重要。 AjaxControlToolkit不是最喜歡的！

來源

2011-09-05 08:17:34 JumpingJezza

-1

.panel 
{ 
    position: absolute; 
    top: 50%; 
    left:50%; 
} 


<asp:Panel id ="pnlUploader" CssClass="panel">

來源

2011-11-25 10:58:44 Aca

它不工作.. :( – 2012-05-22 08:03:28

我知道這是舊的，但沒有答案呢......所以它好嗎？

反正......確保面板從主網頁DIV /面板分離。它使用這個窗口來設置位置。

來源

2012-09-25 22:53:42 Greg

ModalPopupExtender顯示Panel給出的PopupControlId集中在您聲明Panel的div內。因此，請嘗試將ModalPopupExtender保留在您定義的位置，並從容器中移出彈出框Panel（即使不在UpdatePanel之內）。這個對我有用。

祝你好運。

來源

2012-11-06 10:19:42 adripanico

#ModalPopUp 
{ 
    Position:relative; 
    Height:400px; 
    Width:400px; 
    Margin-left:auto; 
    Margin-right:auto; 
    }

這應該在你的頁面的中心位置彈出式窗口。然後只需設置modalbackground的CSS，你應該沒問題。

湯姆

來源

2013-02-06 17:01:57 Hardgraf

模式彈出面板被賦予一個絕對位置。所以它需要在具有非靜態位置的元素中。在這種情況下，我希望它在頁面上居中，所以我將它放在一個元素中（在這種情況下是一個UpdatePanel，但不管它是什麼類型的元素），它的內聯風格爲position：固定;左：0;上：0。

<asp:UpdatePanel ID="updProductPopup" runat="server" style="position:fixed;left:0;top:0;"> 
<contenttemplate> 

    <act:ModalPopupExtender ID="mpeProduct" runat="server" BackgroundCssClass="modalPopupBackground" BehaviorID="behaviourModalPopup" OkControlID="btnMpClose" PopupControlID="pnlModalPopup" PopupDragHandleControlID="pnlMpHandle" TargetControlID="btnMpHidden"> 
    </act:ModalPopupExtender> 

    <!-- pnlModalPopup MUST have inline style display:none --> 
    <asp:Panel ID="pnlModalPopup" runat="server" CssClass="modalPopup" style="display:none;"> 
     <asp:Panel runat="server" ID="pnlMpHandle" CssClass="modalPopupDragHandle"> 
      Panel Header 
     </asp:Panel> 
     <asp:Panel runat="server" ID="pnlMpContent">Here's my content</asp:Panel> 
     <p class="modalPopupClose"> 
      <a id="btnMpClose" href="#" class="custom-button">Close</a> 
     </p> 
    </asp:Panel> 
    <asp:Button ID="btnMpHidden" runat="server" Text="Button" CssClass="modalPopupHiddenButton" /> 

</contenttemplate>

我知道了原來的問題是很老，但我花了很多時間尋找答案，這個問題沒有找到它，這個問題是出現相當高的谷歌，所以希望這會爲別人節省一些時間。

來源

2013-02-08 13:33:46 lucyconnuk

真棒解決方案！爲我解決（我用一個div而不是UpdatePanel） – 2013-04-29 10:01:02

感謝您的這一個！作品完美！此答案應標記爲已解決！ – Haris 2013-11-04 08:16:59

但是，updatepanel並沒有爲我做一個垂直中心，我最終使用了一個div。 – SollyM 2014-08-30 10:28:44

-1

默認移除參數x，y和參數nmode，當您滾動時，它也需要中心位置。

來源

2013-02-22 12:16:11 user2099374

我知道這是一個非常古老的問題，但同樣在這裏尋找解決方案，我想我可能會發布我如何最終解決問題，以幫助他人。

只需使用這種風格在你的面板：

<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />

的「重要」的條款將從modalpopupextender覆蓋所有其他設置。百分比是從twitter引導作爲標準。「display」也會阻止您的面板在加載頁面時顯示。

來源

2013-11-27 12:04:35 Sergio

在屏幕中心定位AJAX ModalPopupExtender問題

回答

相關問題