1

我正在使用 ModalPopupExtender 控件在单击按钮时显示模式弹出对话框。问题是拖动对话框会导致“scrollleft 为空或不是对象”错误。

这是一个视频演示

..这是所有代码：

如果可能的话，我想通过修改 AjaxToolkit 脚本本身来解决这个问题。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
    <link href="Default.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        function onOk() {
            //form1.submit();
        }
    </script>

    <script type="text/javascript">
        var clientid;
        function fnSetFocus(txtClientId) {
            clientid = txtClientId;
            setTimeout("fnFocus()", 1000);

        }

        function fnFocus() {
            //debugger;
            if (document.getElementById("pnlModal").style.display != "none")
                eval("document.getElementById('" + clientid + "').focus()");
        }

        function fnClickOK(sender, e) {
            __doPostBack(sender, e);
        }


    </script>

</head>
<body>
    <form id="form1" runat="server">
        <br />
        Clicking the button will bring up the modal dialog<br />
        <br />    
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server" TargetControlID="Button1"
            PopupDragHandleControlID="programmaticPopupDragHandle" PopupControlID="pnlModal"
            OkControlID="btnOK" CancelControlID="btnCancel" DropShadow="true" OnOkScript="onOk();"
            BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
        <br />
        <asp:Panel ID="pnlModal" runat="server" Style="display: None" BackColor="#CCCCCC">
            <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; background-color: #DDDDDD;
                border: solid 1px Gray; color: Black; text-align: center;">
                Caption
            </asp:Panel>
            <br />
            <table>
                <tr>
                    <td>
                        <asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td align="right">
                        <asp:Button ID="btnOK" runat="server" Text="OK" />
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
        </asp:Panel>
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
        <br />
        <br />
        </div>
    </form>
</body>
</html>

Partial Class MyModalSimple

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then

            Button1.Attributes.Add("onclick", "fnSetFocus('" + txtFirst.ClientID + "');")

            btnOK.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOK.UniqueID, "")

        End If

    End Sub

    Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click
        lblMessage.Text = "Hi, " & txtFirst.Text & " " & txtLast.Text
    End Sub
End Class
4

1 回答 1

2

不幸的是，这是 DragPanelExtender 中的一个已知错误。如果可以选择并且您对 javascript 感到满意，我建议您将模态扩展器全部删除。

例如，使用jQuery/jQuery UI，您的页面将如下所示：

<form id="form1" runat="server">
  <br />
  Clicking the button will bring up the modal dialog<br />
  <br />    
  <div>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <br />
    <div id="myModal" Style="display: None" background="#CCCCCC" title="Caption/Dialog Title">
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblFirst" runat="server" Text="First" />
                </td>
                <td>
                    <asp:TextBox ID="txtFirst" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblLast" runat="server" Text="Last" />
                </td>
                <td>
                    <asp:TextBox ID="txtLast" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    <asp:Label ID="lblMessage" runat="server"></asp:Label>
    <br />
    <br />
    </div>
</form>
<script type="text/javascript">
  $(function() {
    $("#<%= Button1.ClientID %>").click() {
      $("#myModal").dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
    }
  });
</script>

这是一种完全不同的编程方式，但会为用户带来更丰富的 UI 体验。如果您愿意学习 jQuery 以及它是如何连接的，那么它是一种非常自然/流畅的语法，可以为您的网页增加大量的功能/灵活性。现在请记住，我更喜欢 jQuery，但还有许多其他可用的 javascript 库。如果您刚刚开始，您至少应该四处浏览，看看什么看起来最舒服......因为您来自 VB 背景（我来自 C#），所以有可能另一个库编码样式/语法更多吸引人。

现在，如果您不愿意走那条路并且太陌生，那么据我所知，您唯一的选择就是做您不想做的事情……自己编译 AJAX 控制工具包。如果您想走这条路，请从 codeplex 获取最新源并修改以下部分Release\AjaxControlToolkit\Compat\DragDrop\DragDropScripts.js：

_drag: function(isInitialDrag) {
  var ev = window._event;
  var mousePosition = { x: ev.clientX, y: ev.clientY };

对此：

_drag: function(isInitialDrag) {
  if (!this._activeDragVisual) return;
  var ev = window._event;
  var mousePosition = { x: ev.clientX, y: ev.clientY };

某些浏览器中的_onScrollerTick操作会炸毁并取消 dragVisual 函数。 功劳归于此处： freakyer 在 ASP.Net 论坛上的一篇帖子让我沿着这条调试路径找出问题所在……但我没有看到其他解决方案，因为某些浏览器中存在实际错误，如果没有就无法修复脚本更改并重新编译。

我敦促您考虑 jQuery/其他框架路径，那里有大量的社区支持和示例可以帮助您入门。 如果您对框架选项感兴趣，那么不久前的这个问题值得一读。

于 2010-01-14T02:45:03.520 回答