AjaxControlToolKit ModalPopupExtender Drag snap back to center

StackOverflow https://stackoverflow.com/questions/21955471

質問

I am using ModalPopupExtender of AjaxControlToolKit 4.0 (ASP.NET 4.0), every thing working fine, when I drag ModalPopup it is dragging, but the problem is that it is snaping back to its original location(Center). The same code is working on: http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

I have search about this issue but all solutions are given by using external Java script code, but what can be the mistake on following code while the same code working on ASP.NET example page. (From where I copied the same code)

This is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="AjaxToolKitTest4.WebForm3" %>

<!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>Hello</title>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>

        <div>
            <%--Start LinkButton to Show Modal Popup Form--%>
            <asp:LinkButton ID="lnkAddForm" Text="Insert" runat="server" OnClick="lnkAddForm_Click"></asp:LinkButton>
            <%--End LinkButton to Show Modal Popup Form--%>

            <%--Start Panel for Modal Popup Form--%>
            <asp:Panel ID="programmaticPopup"  runat="server" CssClass="modalPopup" Style="display: none; width: 350px; padding: 10px;">                
                <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; width:100%; background-color: #DDDDDD; border: solid 1px Gray; color: Black; text-align: center;">
                    Title Bar
                </asp:Panel>
                    Content of Modal Form
            </asp:Panel>
            <%--End Panel for Modal Popup Form--%>

            <%-- Start AjaxToolKit ModalPopupExtender for Panel  --%>
            <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
            <ajaxToolkit:ModalPopupExtender 
                ID="programmaticModalPopup"                 
                BehaviorID="programmaticModalPopupBehavior"
                TargetControlID="hiddenTargetControlForModalPopup" 
                PopupControlID="programmaticPopup"
                BackgroundCssClass="modalBackground" 
                DropShadow="false" 
                PopupDragHandleControlID="programmaticPopupDragHandle"
                RepositionMode="RepositionOnWindowScroll"
                runat="server">
            </ajaxToolkit:ModalPopupExtender>
            <%-- End AjaxToolKit ModalPopupExtender for Panel  --%>
        </div>

    </form>
</body>
</html>
役に立ちましたか？

解決

The modal popup uses the body of the form for dragging. If the body's height is not properly set, the dragging will not work properly.

Set the following CSS styles and dragging should work.

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

他のヒント

Setting the PopupDragHandleControlID and Drag="true" should be good enough in most of the cases to drag around and drop the popup. If the popup snaps back it could also be the browser. In my case, the same code worked fine in Edge and Chrome where the popup could be moved around and dropped at the place where intended, but in Internet Explorer, the popup would move around when dragged but snap back to the original position when dropped.

HTH!

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top