Positionierung AJAX ModalPopupExtender in der Mitte des Bildschirms problem

Ich habe ein problem mit der Positionierung der ModalPopupExtender in der Mitte des Bildschirms, wenn es PopupDragHandleControlID-Eigenschaft festgelegt ist (ohne diese Eigenschaft funktioniert es einwandfrei ).

ModalPopupExtender nicht positioniert in der Mitte des Bildschirms.
Ich denkt, was das problem verursacht ist die Seite CSS layout verursachen, wenn ich es deaktivieren, popup-positioniert in der Mitte des Bildschirms (ich verstehe nicht, warum css betrifft ModalPopupExtender nur, wenn es PopupDragHandleControlID-Eigenschaft ist eingestellt )

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>

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

InformationsquelleAutor der Frage dani | 2009-08-28

Modal-popup-panel ist mit einem absolute position. So muss es sein in ein element, welches eine nicht-statische position. In diesem Fall, ich will es zentriert auf der Seite, so habe ich es in einem element (in diesem Fall ein UpdatePanel-aber es spielt keine Rolle, welche Art von element es sich handelt), welches ein inline-style von position:fixed;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>

Ich weiß, die ursprüngliche Frage ist schon ziemlich alt, aber ich verbrachte viel Zeit auf der Suche nach der Antwort auf dieses problem, ohne es zu finden, und diese Frage kommt sehr gut bei Google, so hoffentlich wird dies sparen, jemand anders einige Zeit.

InformationsquelleAutor der Antwort lucyconnuk

5

Verwenden Sie die x-und y-Attribute des ModalPopupExtender.

InformationsquelleAutor der Antwort Xs10tial
1

Ich weiß, das ist alt, aber noch keine Antwort ... also ist das ok?

Sowieso ... stellen Sie sicher, das panel ist getrennt von der Haupt-Seite div/panel. Es ist, wie das Fenster, um die position einzustellen.

InformationsquelleAutor der Antwort Greg
1

Ich weiß, dass dies eine sehr alte Frage, aber habe auch hier die Suche nach einer Lösung, dachte ich, dass ich posten kann, wie ich endlich das Problem gelöst, um anderen zu helfen.

Verwenden Sie einfach diesen Stil in Ihrem panel:
```
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />
```
Den "wichtig" - Klausel, überschreiben alle anderen Einstellungen aus dem modalpopupextender. Die Prozentangaben sind entnommen aus twitter bootstrap als standard.
"display" wird auch verhindern, dass Ihr panel zu zeigen, während die Seite geladen.

InformationsquelleAutor der Antwort Sergio
0

Dies hat mich frickin Alter zu arbeiten, für meinen Fall, aber in der end-alle die ich tun musste, war die änderung der Höhe der Systemsteuerung war ich, die sich von 100% auf eine Feste Höhe größer als das panel.
```
<asp:Panel ID="pnlUploader" Width="500px"...
```
Hatte ich auch mein extender, außerhalb des Fensters aber Zweifel, ob das ankommt. AjaxControlToolkit nicht ein Favorit!

InformationsquelleAutor der Antwort JumpingJezza
0

Den ModalPopupExtender zeigt die Panel gegeben als PopupControlId zentriert im div-Sie erklärt die Panel. So versuchen Sie halten die ModalPopupExtender wo man es definiert, und der sich aus den popup - Panel aus dem Behälter (auch aus der UpdatePanel). Es funktioniert für mich.

Glück.

InformationsquelleAutor der Antwort adripanico
0
```
#ModalPopUp
 {
    Position:relative;
    Height:400px;
    Width:400px;
    Margin-left:auto;
    Margin-right:auto;
  }
```
Dieser position sollte Ihr pop-up in der Mitte der Seite. Dann setzen Sie einfach die CSS-Datei für die modalbackground und Sie sollten in Ordnung sein.

Tom

InformationsquelleAutor der Antwort Hardgraf

-1

Hoffe, dass dies erreicht werden kann, gibt es zwei Möglichkeiten.

Schreiben Sie eine css-Klasse-Eigenschaft, wie unten
und nennen den Namen der Klasse in der
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"   />

...

Versuchen HorizontalOffset Eigenschaft in
panel.

InformationsquelleAutor der Antwort Logesh Paul

-1

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


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

InformationsquelleAutor der Antwort Aca

-1

Entfernen von Parameter x, y und repositio nmode standardmäßig dauert es center-position auch beim scrollen.

InformationsquelleAutor der Antwort user2099374

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.