locked
Modal Popup Recentering on browser scroll RRS feed

  • Question

  • User-1545030410 posted

    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

    Friday, January 3, 2014 3:27 PM

Answers

  • User-417640953 posted

    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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 8, 2014 8:56 PM
  • User-417640953 posted

    Do I need to upgrade?

    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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 9, 2014 8:35 AM

All replies

  • User-1545030410 posted

    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.

    Monday, January 6, 2014 10:42 AM
  • User-417640953 posted

    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!

    Tuesday, January 7, 2014 1:27 AM
  • User-1545030410 posted

    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 " />
                                &nbsp &nbsp &nbsp
                                <asp:Button ID="btnsubmit1" runat="server" 
                                    UseSubmitBehavior="false" Text=" Submit "  />
                            </td>
                            <td style="width: 10%;">
                                &nbsp
                            </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

    Tuesday, January 7, 2014 12:53 PM
  • User-417640953 posted

    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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 8, 2014 8:56 PM
  • User-1545030410 posted

    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

     

    Thursday, January 9, 2014 8:23 AM
  • User-417640953 posted

    Do I need to upgrade?

    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!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 9, 2014 8:35 AM
  • User-1545030410 posted

    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

    Friday, January 17, 2014 1:23 PM