Positionner AJAX ModalPopupExtender au centre du problème de l'écran

J'ai un problème avec le positionnement ModalPopupExtender dans le centre de l'écran quand il est PopupDragHandleControlID propriété est définie (sans cette propriété, il fonctionne très bien ).

ModalPopupExtender n'est pas positionné au centre de l'écran.
Je pense que les causes de ce problème est la page de mise en page CSS parce que quand je le désactiver, popup placé au centre de l'écran (je ne comprends pas pourquoi la page du css affecte ModalPopupExtender seulement quand il est PopupDragHandleControlID propriété est définie )

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>

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

source d'informationauteur dani

  1. 15

    Modal popup panneau est donné un absolue position. Il se doit donc d'être à l'intérieur d'un élément qui a un non-position statique. Dans ce cas, je veux qu'il soit centré sur la page, donc je l'ai mis à l'intérieur d'un élément (dans ce cas un UpdatePanel, mais il n'a pas d'importance quel type de l'élément) qui a une ligne de style de 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>

    Je sais que la question d'origine est assez vieux, mais j'ai passé beaucoup de temps à la recherche de la réponse à ce problème sans la trouver, et cette question revient assez fortement sur Google, donc j'espère que cela va sauver quelqu'un d'autre peu de temps.

  2. 5

    Utiliser le x et le y les attributs de la ModalPopupExtender.

  3. 1

    Je sais que c'est vieux, mais pas encore de réponse ... donc c'est ok?

    De toute façon ... assurez-vous que le panneau est séparé de la page principale div/panneau. C'est en utilisant ce que la fenêtre de définir la position.

  4. 1

    Je sais que c'est une très vieille question, mais aussi suis ici à la recherche d'une solution, je pensais peut post comment j'ai finalement résolu le problème, pour aider les autres.

    Suffit d'utiliser ce style dans votre panneau:

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

    La "important" clause de remplacer tous les autres paramètres de la modalpopupextender. Les pourcentages sont prises à partir de twitter bootstrap comme un standard.
    "affichage" sera également empêcher votre panneau pour afficher pendant le chargement de la page.

  5. 0

    Ce qui m'a pris frickin âge de travailler pour mon cas, mais à la fin tout ce que j'avais à faire était de changer la hauteur du panneau, j'ai été étendant à partir de 100% à hauteur fixe plus grand que le panneau.

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

    J'ai aussi eu mon extender à l'extérieur du panneau, mais le doute si ce qui compte. AjaxControlToolkit pas un favori!

  6. 0

    La ModalPopupExtender montre la Panel donné que PopupControlId centré à l'intérieur de la div, vous avez déclaré la Panel. Donc, essayez de garder le ModalPopupExtender où vous en avez défini, et se déplaçant sur le popup Panel de ses conteneurs (même en dehors de la UpdatePanel). Il fonctionne pour moi.

    Bonne chance.

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

    Ce devrait la position de votre fenêtre, dans le centre de votre page. Ensuite il suffit de régler le CSS pour le modalbackground et vous devriez être bien.

    Tom

  8. -1

    Espère que cela peut être réalisé de deux manières.

    • Écrire une classe css propriété comme ci-dessous
      et d'appeler le nom de la classe dans le
      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"   />

    ...

    • Essayer HorizontalOffset propriété dans
      le panneau.
  9. -1
    .panel 
{
position: absolute;
top: 50%;
left:50%;
}
<asp:Panel id ="pnlUploader" CssClass="panel">
  10. -1

    Supprimer le Paramètre x, y et repositio nmode par défaut, il prend la position du centre également lorsque vous faites défiler.