2009-08-28 1 views
16

Ho un problema con il posizionamento di ModalPopupExtender nel centro dello schermo quando è impostata la proprietà PopupDragHandleControlID (senza questa proprietà funziona correttamente).Posizionamento AJAX ModalPopupExtender al centro del problema schermo

ModalPopupExtender non è posizionato al centro dello schermo. I pensa che cosa causa il problema è layout CSS causa della pagina quando ho disabilitarlo, popup posizionato al centro dello schermo (non capisco il motivo per cui css di pagina influisce ModalPopupExtender solo quando è proprietà PopupDragHandleControlID è impostato)

thepage :

<!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> 

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

risposta

-1

Spero che questo può essere raggiunto in due modi.

  • Scrivi una proprietà di classe CSS come qui di seguito e chiamare il nome della classe nella ModalPopupExtender.

CSS:

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

CODICE:

<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" /> 

...

  • Prova proprietà HorizontalOffset in pannello.
+1

non ha aiutato. E c'è solo la proprietà HorizontalAlign ed è per il contenuto del pannello. – dani

4

Utilizzare gli attributi x e y di ModalPopupExtender.

+0

Questo era esattamente ciò di cui avevo bisogno! Grazie a Xs10tial! – MikeC

+0

Questa è la risposta corretta, tia –

0

Questo mi ha richiesto un po 'di tempo per risolvere il mio caso, ma alla fine tutto quello che dovevo fare era cambiare l'altezza del pannello che stavo estendendo dal 100% ad un'altezza fissa più grande del pannello.

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

Ho anche avuto il mio extender al di fuori del pannello ma dubito che sia importante. AjaxControlToolkit non è un preferito!

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


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

Non funziona .. :( –

1

So che questo è vecchio, ma nessuna risposta ancora ... quindi è ok?

Ad ogni modo ... assicurarsi che il pannello sia separato dal pannello div della pagina principale. Lo sta usando come finestra per impostare la posizione.

0

Il ModalPopupExtender indica Panel dato come PopupControlId centrato all'interno del div che ha dichiarato Panel. Quindi prova a mantenere lo ModalPopupExtender dove lo hai definito e spostando il popup Panel dai suoi contenitori (anche su UpdatePanel). Per me funziona.

Buona fortuna.

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

Questo dovrebbe posizionare il popup al centro della pagina. Quindi imposta il CSS per il modalbackground e dovresti stare bene.

Tom

15

pannello popup modale viene dato un assoluto posizione . Quindi deve essere all'interno di un elemento che ha una posizione non statica . In questo caso, voglio che sia centrato sulla pagina, quindi l'ho messo in un elemento (in questo caso un UpdatePanel ma non importa che tipo di elemento è) che ha uno stile in linea della posizione : risolto; left: 0; top: 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> 

so la domanda iniziale è piuttosto vecchio, ma ho speso un sacco di tempo a cercare la risposta a questo problema senza trovarlo, e questa domanda è esce abbastanza altamente su Google, in modo da spero che questo salvi qualcun altro un po 'di tempo.

+2

Soluzione eccezionale! Risolta per me (ho usato un div anziché UpdatePanel) –

+0

Grazie per questo! Funziona perfettamente! Questa risposta dovrebbe essere contrassegnata come risolta! – Haris

+0

Tuttavia, updatepanel non ha fatto un centro verticale per me, ho finito per usare un div. – SollyM

-1

Rimuovi Parametro x, ye repositio nmode per impostazione predefinita prende la posizione centrale anche quando si scorre.

1

So che questa è una domanda molto vecchia, ma come anche qui sono alla ricerca di una soluzione, ho pensato di postare come ho finalmente risolto il problema, per aiutare gli altri.

Basta usare quello stile nel tuo pannello:

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

La clausola di "importante" avrà la precedenza su tutte le altre impostazioni dal ModalPopupExtender. Le percentuali sono prese dal bootstrap di Twitter come standard. "display" impedirà anche la visualizzazione del pannello durante il caricamento della pagina.

Problemi correlati