I have a draggable a panel with a ModalPopupExtender with an UpdatePanel inside it. Whenever I have an asynchronous postback run, the popup "jumps" back to to the center of the screen. Ideally it would stay in whatever position it is currently in, as the jump is jarring to the user experience.
Anyone know a way to avoid this?
Thanks!
Hi MWB,
To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.
Best regards,
Jonathan
Hi Jonathan -
Thanks very much for responding. I put together an extremely simple (and rather ugly, so forgive me) website project that reproduces the jumping modal popup behavior. Please let me know if you have any thoughts or questions. Since I can't directly upload the project files, the code is below.
Thanks again!
-Matthew
Default.aspx
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
*
{
font-family: Verdana, Helvetica, San-Serif;
} .popupButton
{
font-weight: bold;
color: #C00;
}
.modalPopupBackground
{
background-color: #CCC;
filter: alpha(opacity=60);
opacity: 0.6;
}
.windowTitle
{
border: solid 2px #9CF;
background-color: #369;
color: #FFF;
font-size: 16px;
text-align: center;
padding: 10px 10px 10px 10px;
}
.window
{
width: 400px;
border: solid 2px #036;
background-color: #FFF;
padding: 5px 5px 5px 5px;
}
.windowContent
{
text-align: center;
margin: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" /
<h1>Click this button</h1>
<asp:Button ID="Button_OpenPopup" runat="server" Text="Open Modal Popup" CssClass="popupButton" /
<div>
<h4>Junk text to allow dragging of Modal Popup</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vehicula nisi vitae elit. Vivamus metus diam, dignissim in, vehicula vitae, ultrices a, dui. Maecenas nec eros vel lacus gravida nonummy. Donec laoreet, metus vel interdum sodales, pede augue iaculis nunc, et venenatis sem mi sed elit. Donec arcu. Praesent nec magna. Nunc egestas lectus ac quam. Quisque in justo non tortor luctus faucibus. Fusce mattis dignissim diam. Phasellus gravida risus vel magna. Mauris commodo felis nec metus. Cras commodo euismod ante. Donec consectetuer nisl vitae nulla. Nam aliquet. Mauris semper velit id orci. Suspendisse elementum, pede et dictum molestie, mi ante pulvinar metus, ut varius massa dui et diam. Integer dictum fermentum ipsum. Nunc quis odio. Aenean vitae tellus.
</p>
<p>
In elit lectus, fermentum ac, fringilla accumsan, aliquam in, turpis. Praesent tempus sagittis augue. Aenean leo lectus, mattis ultricies, interdum sed, luctus ac, ligula. In hac habitasse platea dictumst. Vivamus placerat. Fusce turpis enim, tempor tempor, luctus at, bibendum id, sapien. Morbi feugiat ante eu eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed felis. Duis sit amet justo. Vivamus eu diam ac dui bibendum tempus. Vivamus quis neque sit amet felis rutrum tristique.
</p>
<p>
Pellentesque adipiscing accumsan est. Sed dignissim arcu nec orci. Sed euismod diam. Donec at tellus. Suspendisse mauris neque, pharetra et, pretium vitae, blandit ut, pede. Vestibulum aliquet, nisi eu varius congue, neque dolor ornare augue, ut iaculis lacus urna eget justo. Vivamus urna. Suspendisse ipsum diam, blandit sit amet, semper ut, cursus eu, leo. Cras pede lorem, rhoncus vitae, posuere ac, ultrices at, lacus. Cras in augue quis purus ultrices sollicitudin. Nam congue, magna id sodales suscipit, tortor tellus ullamcorper metus, blandit iaculis nunc eros id augue. Nam posuere erat quis est. Nunc porta leo et lorem. Nam cursus massa et arcu. Proin augue diam, blandit ut, imperdiet a, elementum nec, purus. Pellentesque metus mauris, dignissim ac, dignissim et, venenatis in, massa. Curabitur eget dui sit amet erat tincidunt volutpat. Fusce vel nibh quis erat blandit posuere. Mauris porta, erat sit amet tincidunt commodo, augue lectus porttitor nulla, nec lobortis lacus elit ut elit. Cras feugiat posuere justo.
</p>
<p>
Cras a velit id massa ornare commodo. Donec egestas. Vestibulum sed felis. Etiam aliquam, tellus sit amet consectetuer bibendum, dui ante volutpat ligula, at semper lacus tellus a lorem. Sed et elit. Integer nisi purus, suscipit ac, nonummy nec, placerat eget, diam. Nullam sodales. Quisque erat pede, ultrices non, cursus ut, euismod vel, sem. In hac habitasse platea dictumst. Ut sit amet est. Nulla pellentesque. Quisque non dolor. Vestibulum mi arcu, accumsan ac, ullamcorper mollis, dignissim eu, urna. Vestibulum metus quam, congue eget, tempus quis, pellentesque ac, eros. Suspendisse risus lectus, interdum nec, tristique ut, auctor eu, urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ac mi. Sed eget arcu. Curabitur eu libero sit amet odio fringilla pharetra. Aenean arcu.
</p>
<p>
Donec malesuada. Phasellus sapien risus, tristique sit amet, varius id, iaculis sit amet, purus. Morbi egestas risus et turpis. Curabitur quis quam. Vestibulum tortor sem, feugiat id, laoreet et, egestas at, metus. Aenean pellentesque tellus sed metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia tempor erat. Vestibulum pharetra, sem vel porttitor lobortis, libero erat ultricies nulla, sed suscipit justo lorem vel nisi. Sed at sapien. Maecenas vestibulum elementum odio. Duis sagittis, diam vel posuere egestas, sapien lorem vulputate metus, faucibus rhoncus diam nulla sed est. Mauris imperdiet. Nulla sagittis. Aliquam velit arcu, facilisis in, tempus vel, hendrerit in, dolor. Ut lacinia est non neque nonummy ullamcorper.
</p>
<p>
*** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet orci eu neque imperdiet imperdiet. Phasellus blandit mauris nonummy urna. Phasellus lacinia vestibulum felis. Fusce ullamcorper egestas sem. Donec auctor, lacus nec vulputate convallis, nunc purus vehicula erat, vitae blandit purus mi at lectus. Suspendisse tincidunt. Donec id justo. Sed eros augue, lobortis non, rhoncus quis, fermentum porta, risus. Pellentesque egestas condimentum quam. Nullam neque. Vivamus convallis tellus ut mauris. Phasellus luctus dapibus nibh. Phasellus pulvinar massa non nisi. Aenean malesuada euismod lacus. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce vitae tortor non diam pellentesque consectetuer. Curabitur tincidunt nunc sit amet turpis.
</p>
<p>
Donec est turpis, mattis in, scelerisque non, aliquet elementum, libero. Quisque mauris erat, rhoncus sit amet, tristique vitae, condimentum in, nunc. Vivamus quam nisl, tincidunt vel, consequat eu, sodales id, mauris. Nam eu eros id massa cursus pellentesque. Etiam quis metus in mi fringilla lacinia. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ac nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Sed sodales porttitor dolor. Vestibulum risus. Mauris augue augue, ultricies vitae, adipiscing in, elementum sit amet, nunc.
</p>
<p>
Pellentesque pulvinar dignissim quam. Donec sed justo et elit semper interdum. Duis nec leo ac urna pellentesque eleifend. Morbi consectetuer purus ut felis. Nulla euismod fermentum enim. Ut aliquet tellus at justo. Sed purus. Phasellus porttitor commodo ligula. Phasellus sem. Donec non orci. Donec in nibh in lorem lacinia sagittis. Aenean vestibulum dictum sem. Sed ligula. Maecenas pharetra laoreet velit. Nam vitae mauris nec tellus cursus tincidunt. Curabitur malesuada massa feugiat nisl. Maecenas dapibus aliquam diam. Pellentesque ac dolor. Proin sagittis ultricies dui.
</p>
<p>
Ut vel orci sagittis odio tempor porta. Cras vitae nunc. In sollicitudin pharetra sapien. Donec imperdiet. Aenean egestas dui a mi. Cras mauris velit, tincidunt sed, tempor et, sollicitudin et, arcu. Quisque turpis lorem, hendrerit quis, blandit quis, convallis eget, pede. Etiam lacus lectus, molestie vitae, egestas pellentesque, dapibus sit amet, est. Suspendisse nibh dolor, bibendum a, sollicitudin sollicitudin, pulvinar sed, magna. Proin in nunc. Praesent blandit tempus magna. Aliquam erat volutpat. Morbi mattis. Nunc pretium laoreet ante. Integer eros nisi, luctus sed, commodo quis, tincidunt quis, ipsum. Morbi magna dolor, tempor id, sagittis faucibus, adipiscing at, dui. Sed ornare, orci non lobortis viverra, nibh enim auctor lorem, at bibendum lacus massa et eros. Phasellus luctus. Suspendisse volutpat nunc eget augue.
</p>
<p>
Curabitur vulputate. Donec nunc lorem, porta accumsan, pretium nec, scelerisque aliquet, ligula. Aenean eleifend aliquam lorem. Quisque facilisis. Nullam porta. Vivamus congue dapibus libero. Vestibulum placerat bibendum enim. Sed diam eros, lobortis vel, varius a, pretium et, nibh. Nulla nisi dui, malesuada eu, lobortis tincidunt, mattis nec, leo. Proin massa mauris, interdum et, elementum vitae, ornare ut, lorem. Fusce erat massa, dignissim sed, viverra sit amet, euismod in, magna. Donec consectetuer porta odio.
</p>
</div
<asp:Panel ID="Panel_PopupWindow" runat="server" CssClass="window">
<asp:Panel ID="Panel_Panel_PopupWindowTitle" runat="server" CssClass="windowTitle">
<p><strong>Drag Me</strong></p>
<asp:Button ID="Button_ClosePopup" runat="server" Text="Close Modal Popup" />
</asp:Panel
<asp:Panel ID="Panel_PopupWindowContent" runat="server" CssClass="windowContent">
<asp:UpdatePanel ID="UpdatePanel_PopupWindowContent" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<div style="text-align: left;">
<p>How to reproduce the jumping Modal Popup issue:</p>
<ol>
<li>
Drag the popup using the blue box that says "Drag Me" above
so that the popup is no longer in the default centered location
</li>
<li>Click "Generate Asynchronous Postback"</li>
<li>
Note how the popup "jumps" back to the default
center location. This is the behavior I wish to avoid.
</li>
</ol>
</div>
<p><strong>Any ideas? Thanks!</strong></p>
<p><asp:Literal ID="Literal_Test" runat="server" /></p>
<asp:Button runat="server" Text="Generate Asynchronous Postback" OnClick="ShowDate" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" EnableViewState="true" TargetControlID="Button_OpenPopup" PopupControlID="Panel_PopupWindow"
CancelControlID="Button_ClosePopup" PopupDragHandleControlID="Panel_Panel_PopupWindowTitle" BackgroundCssClass="modalPopupBackground" />
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Web.UI.WebControls;
public partialclass _Default : System.Web.UI.Page
{
protected void ShowDate(object sender, EventArgs e)
{
Literal_Test.Text = System.DateTime.Now.ToString();
}
}
Web.Config
<configuration>
<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
<system.web>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
</controls>
</pages>
<compilation debug="true">
<assemblies>
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
<add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
</assemblies>
</compilation>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
</system.web>
<system.web.extensions>
<scripting>
<webServices>
</webServices>
</scripting>
</system.web.extensions>
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated"/>
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</handlers>
</system.webServer>
</configuration>
Hi MWB,
Thanks for your sample.I have reproduced your problem with your sample.
Based on my research and testing, I'm afraid that what your want is not achievable in your case.It will automaticlly reset to orignal position when a post occured.Thanks.
Best regards,
Jonathan
