AjaxControlToolKit ModalPopupExtender将捕捉拖动回中心 [英] AjaxControlToolKit ModalPopupExtender Drag snap back to center

查看:106
本文介绍了AjaxControlToolKit ModalPopupExtender将捕捉拖动回中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是AjaxControlToolKit 4.0(ASP.NET 4.0)的ModalPopupExtender,一切正常,当我拖动ModalPopup时,它正在拖动,但是问题是它已恢复到其原始位置(中心)。
正在使用相同的代码:
http:// www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

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

我已经搜索了此问题,但是所有解决方案都是使用外部Java脚本给出的代码,但是在ASP.NET示例页上使用相同代码时,以下代码可能是错误的。 (从我复制相同代码的位置开始)

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)

这是我的代码:

<%@ 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.

设置以下CSS样式并进行拖动即可。

Set the following CSS styles and dragging should work.

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

这篇关于AjaxControlToolKit ModalPopupExtender将捕捉拖动回中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆