asp.net - net - modalpopupextender c# ejemplo
Posicionando AJAX ModalPopupExtender en el centro del problema de la pantalla (11)
Tengo problemas con el posicionamiento de ModalPopupExtender en el centro de la pantalla cuando se establece la propiedad PopupDragHandleControlID (sin esta propiedad funciona bien).
ModalPopupExtender no está posicionado en el centro de la pantalla. Pienso que la causa del problema es el diseño de CSS de la página cuando lo inhabilito, aparece la ventana emergente en el centro de la pantalla (no entiendo por qué el css de la página afecta a ModalPopupExtender solo cuando se establece la propiedad PopupDragHandleControlID)
La página:
<!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>
El 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;
}
El ModalPopupExtender muestra el Panel dado como PopupControlId centrado dentro de la div que usted declaró el Panel . Así que intente mantener el ModalPopupExtender donde lo definió y mover el Panel emergente de sus contenedores (incluso fuera del UpdatePanel ). Esto funciona para mi.
Buena suerte.
El panel emergente modal recibe una posición absoluta . Por lo tanto, debe estar dentro de un elemento que tenga una posición no estática . En este caso, quiero que esté centrado en la página, así que lo puse dentro de un elemento (en este caso, un UpdatePanel pero no importa qué tipo de elemento es) que tiene un estilo de posición en línea: corregido ; izquierda: 0; arriba: 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>
Sé que la pregunta original es bastante antigua, pero pasé mucho tiempo buscando la respuesta a este problema sin encontrarlo, y esta pregunta es bastante importante en Google, así que espero que esto ahorre a alguien más algún tiempo.
Elimine por defecto el parámetro x, y y el nodo de repositio. También ocupa la posición central cuando se desplaza.
Espero que esto se pueda lograr de dos maneras.
- Escriba una propiedad de clase css como la de abajo y llame el nombre de la clase en el ModalPopupExtender.
CSS:
.hcenter{margin:0 auto; width:200;} /* I have given a sample width you give the width of your popup */
CÓDIGO:
<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" />
...
- Pruebe la propiedad HorizontalOffset en el panel.
Esto me llevó mucho tiempo a trabajar en mi caso, pero al final, todo lo que tenía que hacer era cambiar la altura del panel que estaba extendiendo del 100% a una altura fija más grande que el panel.
<asp:Panel ID="pnlUploader" Width="500px"...
También tuve mi extensor fuera del panel, pero dudo si eso importa. AjaxControlToolkit no es un favorito!
Sé que esta es una pregunta muy antigua, pero como también llegué aquí buscando una solución, pensé que podría publicar cómo finalmente resolví el problema, para ayudar a otros.
Solo usa ese estilo en tu panel:
<asp:Panel style="left: 50% !important; top: 10% !important; display: none;" />
La cláusula "importante" anulará todas las demás configuraciones del modalpopupextender. Los porcentajes se toman de Twitter Bootstrap como estándar. "mostrar" también evitará que su panel se muestre mientras se carga la página.
Sé que esto es viejo, pero aún no hay respuesta ... ¿está bien?
De todos modos ... asegúrese de que el panel esté separado de la página principal div / panel. Está utilizando eso como la ventana para establecer la posición.
Use los atributos x e y del ModalPopupExtender.
Utilicé esto y está funcionando muy bien. El lugar que busca es X = "100" Y = "100". Da una posición fija y el popupDragHandleControlID te da la posibilidad de arrastrar tu ventana como desees. Aquí la solución
<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>
#ModalPopUp
{
Position:relative;
Height:400px;
Width:400px;
Margin-left:auto;
Margin-right:auto;
}
Esto debería colocar tu ventana emergente en el centro de tu página. Luego, simplemente configura el CSS para el modalbackground y estarás bien.
Tom
.panel
{
position: absolute;
top: 50%;
left:50%;
}
<asp:Panel id ="pnlUploader" CssClass="panel">