web-dev-qa-db-fra.com

Positionnement AJAX ModalPopupExtender au centre du problème d'écran

J'ai du mal à positionner ModalPopupExtender au centre de l'écran lorsque sa propriété PopupDragHandleControlID est définie (sans cette propriété, cela fonctionne correctement).

ModalPopupExtender n'est pas positionné au centre de l'écran. Je pense que ce qui cause le problème, c'est la mise en page CSS de la page lorsque je la désactive, un popup positionné au centre de l'écran (je ne comprends pas pourquoi le css de la page affecte ModalPopupExtender uniquement quand sa propriété PopupDragHandleControlID est définie)

La page:

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

Le 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;
}
asp.netcssajaxajaxcontroltoolkitmodalpopupextender
16
dani

Le panneau contextuel modal se voit attribuer une position absolue . Donc, il doit être à l'intérieur d'un élément qui a une position non statique . Dans ce cas, je veux qu'il soit centré sur la page, je l'ai donc placé dans un élément (dans ce cas un UpdatePanel mais peu importe le type d'élément), qui a un style en ligne de position : fixe; gauche: 0; haut: 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>

Je sais que la question initiale est assez ancienne, mais j'ai passé beaucoup de temps à chercher la réponse à ce problème sans la trouver, et cette question est très posée sur Google. J'espère donc que cela sauvera du temps à quelqu'un d'autre.

16
lucyconnuk

Utilisez les attributs x et y de ModalPopupExtender.

5
Xs10tial

Je sais que la question est très ancienne, mais comme je suis aussi à la recherche d’une solution, j’ai pensé pouvoir indiquer comment j’ai finalement résolu le problème, pour aider les autres.

Utilisez simplement ce style dans votre panneau:

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

La clause "important" remplacera tous les autres paramètres du modalpopupextender. Les pourcentages sont tirés de Twitter bootstrap en tant que norme. "display" empêchera également l'affichage de votre panneau lors du chargement de la page.

1
Sergio

Je sais que c'est vieux, mais pas encore de réponse ... alors ça va?

Quoi qu'il en soit ... assurez-vous que le panneau est séparé de la page principale div/panel. C'est en utilisant cela comme fenêtre pour définir la position.

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

Cela devrait positionner votre popup au centre de votre page. Ensuite, définissez simplement le CSS pour modalbackground et tout devrait bien se passer.

À M

0
Hardgraf

La ModalPopupExtender montre la Panel donnée sous la forme PopupControlId centrée dans la div que vous avez déclarée la Panel. Essayez donc de garder la ModalPopupExtender où vous l'avez définie et de sortir la popup Panel de ses conteneurs (même dans la UpdatePanel). Ça marche pour moi.

Bonne chance.

0
adripanico

Je l'ai utilisé et ça fonctionne très bien. Le spot que vous recherchez est X = "100" Y = "100". Il donne une position fixe et le popupDragHandleControlID vous donne la possibilité de faire glisser votre fenêtre comme vous le souhaitez. Voici la solution

<ajaxToolkit:ModalPopupExtender ID="mpePopupTestAdd" runat="server" TargetControlID="hfdPopupAnchorTestAdd" PopupDragHandleControlID="pnlPopupTestAdd"  X="100" Y="100" PopupControlID="pnlPopupFilterAdd" CancelControlID="btnCancelFilterAdd" BackgroundCssClass="ModalPopupBG"></ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPopupTestAdd" Style="display: none" runat="server" Width="550" DefaultButton="btnOKTestAdd">
    <div id="divContainerTestAdd" runat="server" class="panel Test">
<!-- header-->
<!-- Body -->
        </div>
</asp:Panel>
0
Olivier Lachance

Cela m'a pris des années à régler mon cas, mais au final, tout ce que je devais faire était de changer la hauteur du panneau que je passais de 100% à une hauteur fixe plus grande que le panneau.

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

J'avais aussi mon extension en dehors du panel, mais je doute que cela compte. AjaxControlToolkit n'est pas un favori!

0
JumpingJezza