Hello - I have a draggable modal popup on a large web form (scrollable up and down). When the user drags the popup and then scrolls the form the modal popup recenters. Is there a way to avoid this behaviour?
Thanks for your links. They refer to the pop centering on a postback where as my problem is the popup is recentering on a scroll of the background form. I searched for any questions that were similar but found none.
When the user drags the popup and then scrolls the form the modal popup recenters. Is there a way to avoid this behaviour?
Hi HankAnzis,
Thank you post the issue, for this issue, I suggest you using the jquery ui model popup.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$("#Button1").click(function () {
$("#dialog").dialog({ modal: true });
});
});
</script>
<div>
<input id="Button1" type="button" value="button" />
<%for(int i=0; i<30; i++){ %>
hello<br /><br />
hello<br />
<%} %>
<div id="dialog" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</div>
If you prefer to use the ajax control ModalPopupExtender, please share your code with us, then we can reproduce your issue and give you further solutions.
Thanks.
Best Regards!
We are trying to better understand customer views on social support experience. Click HERE to participate the survey. Thanks!
Hi, Thanks for your replay. I do not have Reposition Mode as an option on my ajax control toolkit. I am using version 1.0.10618.0. Do I need to upgrade?
Thanks for your help. I had some delays on my end upgrading the AJAX but once I did I could set the RepositionMode property and the dialog pop stopped recentering.
Member
4 Points
23 Posts
Modal Popup Recentering on browser scroll
Jan 03, 2014 03:27 PM|HankAnzis|LINK
Hello - I have a draggable modal popup on a large web form (scrollable up and down). When the user drags the popup and then scrolls the form the modal popup recenters. Is there a way to avoid this behaviour?
TIA
All-Star
48393 Points
12161 Posts
Re: Modal Popup Recentering on browser scroll
Jan 05, 2014 10:48 PM|chetan.sarode|LINK
http://forums.asp.net/t/1211955.aspx
http://forums.asp.net/t/1112277.aspx
Team Lead, Product Development
Approva Systems Pvt Ltd, Pune, India.
Member
4 Points
23 Posts
Re: Modal Popup Recentering on browser scroll
Jan 06, 2014 10:42 AM|HankAnzis|LINK
Thanks for your links. They refer to the pop centering on a postback where as my problem is the popup is recentering on a scroll of the background form. I searched for any questions that were similar but found none.
All-Star
30411 Points
3628 Posts
Re: Modal Popup Recentering on browser scroll
Jan 07, 2014 01:27 AM|Fuxiang Zhang - MSFT|LINK
Hi HankAnzis,
Thank you post the issue, for this issue, I suggest you using the jquery ui model popup.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function () { $("#Button1").click(function () { $("#dialog").dialog({ modal: true }); }); }); </script> <div> <input id="Button1" type="button" value="button" /> <%for(int i=0; i<30; i++){ %> hello<br /><br /> hello<br /> <%} %> <div id="dialog" title="Basic dialog" style="display:none;"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> </div>If you prefer to use the ajax control ModalPopupExtender, please share your code with us, then we can reproduce your issue and give you further solutions.
Thanks.
Best Regards!
Member
4 Points
23 Posts
Re: Modal Popup Recentering on browser scroll
Jan 07, 2014 12:53 PM|HankAnzis|LINK
Thanks for your help. Here is some sample code that reproduces this issue in vs2008 - ASP.Net 3.5 using browser IE 10 and Chrome
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="RinAlliance2.Default2" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AspAjax" %> <!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></title> <style> .modalPopup { line-height: 1.8; background-color: #ffffff; border-width: 3px; border-style: solid; border-color: Gray; padding: 3px; z-index: 10000; width:100%; font-size:small; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanelMain" runat="server"> <ContentTemplate> <asp:UpdateProgress ID="UpdateProgress" AssociatedUpdatePanelID="UpdatePanelMain" DisplayAfter="00" runat="server"> <ProgressTemplate> <div class="overlay"> <div class="loader"> <img id="Working" alt="Working" src="../../../Images/indicator.gif" /> <span style="color: Yellow; font-size: xx-large; font-weight: bolder;">Working...</span> </div> </div> </ProgressTemplate> </asp:UpdateProgress> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr style="height:100px"><td><asp:LinkButton ID="lbBtnPopUp" runat="server">PopUp:</asp:LinkButton></td></tr> <tr style="height:100px"><td>Row 01</td></tr> <tr style="height:100px"><td>Row 02</td></tr> <tr style="height:100px"><td>Row 03</td></tr> <tr style="height:100px"><td>Row 04</td></tr> <tr style="height:100px"><td>Row 05</td></tr> <tr style="height:100px"><td>Row 06</td></tr> <tr style="height:100px"><td>Row 07</td></tr> <tr style="height:100px"><td>Row 08</td></tr> <tr style="height:100px"><td>Row 09</td></tr> <tr style="height:100px"><td>Row 10</td></tr> </table> <asp:Panel ID="pnlPopUp" runat="server" Style="display: none;" CssClass="modalPopup" Height="300px" Width="300px"> <b>Seller Information </b> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="right" valign="top"> <asp:Button ID="btnClose" runat="server" Text=" Close " />       <asp:Button ID="btnsubmit1" runat="server" UseSubmitBehavior="false" Text=" Submit " /> </td> <td style="width: 10%;">   </td> </tr> </table> </asp:Panel> <AspAjax:ModalPopupExtender ID="MPESeller" runat="server" BackgroundCssClass="modalBackground" CancelControlID="btnClose" TargetControlID="lbBtnPopUp" PopupControlID="pnlPopUp" DropShadow="true" Drag="true" PopupDragHandleControlID="pnlPopUp"> </AspAjax:ModalPopupExtender> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>Thanks and regards
All-Star
30411 Points
3628 Posts
Re: Modal Popup Recentering on browser scroll
Jan 08, 2014 08:56 PM|Fuxiang Zhang - MSFT|LINK
Hi HankAnzis,
Thanks for your response.
According to your description, I can reproduce the scenes you discribed.
If you do not want the pop up recentering when page scroll, you should set the attribute "RepositionMode" as "none".
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" CancelControlID="btnClose" TargetControlID="lbBtnPopUp" PopupControlID="pnlPopUp" DropShadow="true" Drag="true" PopupDragHandleControlID="pnlPopUp" RepositionMode="None" > </asp:ModalPopupExtender>Please try it again, if any doubt, please feel free to back. Thanks.
Regards!
Member
4 Points
23 Posts
Re: Modal Popup Recentering on browser scroll
Jan 09, 2014 08:23 AM|HankAnzis|LINK
Hi, Thanks for your replay. I do not have Reposition Mode as an option on my ajax control toolkit. I am using version 1.0.10618.0. Do I need to upgrade?
Thanks and regards
All-Star
30411 Points
3628 Posts
Re: Modal Popup Recentering on browser scroll
Jan 09, 2014 08:35 AM|Fuxiang Zhang - MSFT|LINK
Hi,
I'm glad to see you back.
Please check below site to update your ajax control toolkit:
http://ajaxcontroltoolkit.codeplex.com/
Helpfull issue:
http://ajaxcontroltoolkit.codeplex.com/workitem/15182
Regards!
Member
4 Points
23 Posts
Re: Modal Popup Recentering on browser scroll
Jan 17, 2014 01:23 PM|HankAnzis|LINK
Thanks for your help. I had some delays on my end upgrading the AJAX but once I did I could set the RepositionMode property and the dialog pop stopped recentering.
Thanks again!
Hank