我使用的是AjaxControlToolKit 4.0(ASP.NET 4.0)的ModalPopupExtender,一切正常,当我拖动ModalPopup时,它正在拖动,但是问题是它已恢复到其原始位置(中心)。相同的代码正在处理:http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
我已经搜索了这个问题,但是所有解决方案都是使用外部Java脚本代码给出的,但是在ASP.NET示例页面上使用相同的代码时,以下代码可能是错误的。 (从我复制相同代码的位置开始)
这是我的代码:
<%@ 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>
body
进行拖动。如果未正确设置身体的高度,则拖动将无法正常进行。 设置以下CSS样式,然后拖动即可。
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
HTH!