0

我有一个带有 4 个图像按钮的 JQuery 模式表单。当模态框打开并单击这些按钮时，什么也没有发生。我知道当盒子打开时它会移出表格，但我不知道如何取回它。我在 .parent().appendTo($("form")); 上尝试了几种变体；并以许多不同的方式改变了这一点，但没有成功。目前，当我使用该框时，该框打开但整个屏幕变暗，我无法单击按钮。这是我的 JQuery 函数：

 <script type="text/javascript">
    $(function () {
        $("#Change").dialog({
            resizable: false,
            draggable: false,
            width: 800,
            modal: true,
            show: { effect: 'fadeIn', duration: 500 },
            hide: { effect: 'fadeOut', duration: 300 },
            autoOpen: false,
            open: function (type, data) {
                $(this).parent().appendTo($("form"));
            }
        });

        $("#ui-dialog-title-dialog").hide();
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');

        $("#openChange1").click(function () {
            $("#<%=txtCardChange.ClientID %>").val("1");
            $("#Change").dialog("open");
            $('.ui-widget-overlay').live("click", function () {
                $("#Change").dialog("close");

            });
            return false;
        });

    });
</script>

如果需要这里是我的 html 来调用模态表单：

<a id="openChange1" href="#" style="color: Red">Change Card</a>

模态表单的 html 就在一个简单的 div 标签内：

        <div id="Change">
            \\html here
        </div>

因此，任何帮助将不胜感激。如果需要，我将使用带有 .NET 4.0 的 Visual Studio 2012。按钮后面的代码在 C# 中。感谢您的时间。

4

4 回答 4

2

我有同样的问题，我解决了如下：

<script type="text/javascript">
    $(function () {
        $("#Change").dialog({
            resizable: false,
            draggable: false,
            width: 800,
            modal: true,
            show: { effect: 'fadeIn', duration: 500 },
            hide: { effect: 'fadeOut', duration: 300 },
            autoOpen: false,
            appendTo: "form"
        });

        $("#ui-dialog-title-dialog").hide();
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');

        $("#openChange1").click(function () {
            $("#<%=txtCardChange.ClientID %>").val("1");
            $("#Change").dialog("open");
            $('.ui-widget-overlay').live("click", function () {
                $("#Change").dialog("close");

            });
            return false;
        });

    });
</script>

在 jQuery UI v1.10 中，他们添加了一个 appendTo 属性，这似乎与调用 .parent().appendTo($("form")) 做同样的事情。该对话框出现在灰色背景的顶部。并且回发确实有效。

于 2013-05-27T06:46:04.983 回答
1 
<asp:LinkButton runat="server" id="openChange1" onclientclick="openChange1Click()" />

<script type="text/javascript">
function openChange1Click () {
        $("#<%=txtCardChange.ClientID %>").val("1");
        $("#Change").dialog("open");
        $('.ui-widget-overlay').live("click", function () {
            $("#Change").dialog("close");

        });
        return false;
    }
</script>
于 2013-04-10T18:12:57.527 回答
1

正如您所提到的，JQuery 将对话框的内容移动到页面主体的直接子级以解决几个呈现问题：http: //forum.jquery.com/topic/preventing-dialog-from-rearranging-dom-flow

问题是，如果您立即将按钮向后移动，用于使屏幕其余部分变暗并使对话框模式化（即吃点击事件）的“覆盖”div 会阻止您的按钮点击发生在原始位置。

一种解决方案是为模态和绑定单击处理程序使用更改 div 的克隆，该处理程序在原始按钮上调用 click()。

另一种选择是让按钮调用 .NET 的回发方法，而不是让普通的 HTML 表单进行提交：

__doPostBack("ctl00$button_name_here");
于 2013-04-10T18:33:35.740 回答
0

明白了，谢谢你的帮助，它把我引向了正确的方向。

    $(function () {
        $("#Change").dialog({
            resizable: false,
            draggable: false,
            width: 400,
            modal: true,
            show: { effect: 'fadeIn', duration: 500 },
            hide: { effect: 'fadeOut', duration: 500 },
            autoOpen: false,
            open: function (type, data) {
                $(this).parent().appendTo("form:first");
            }
        }).parent().css('z-index', '1005');

        $("#ui-dialog-title-dialog").hide();
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');
        $("#Change").hide().show();

        $("#openChange1").click(function () {
            $("#<%=txtCardChange.ClientID %>").val("1");
            $("#Change").dialog("open");
            $('.ui-widget-overlay').live("click", function () {
                $("#Change").dialog("close");
            });
            return false;
        });
    });
于 2013-04-11T18:30:40.247 回答