Question

我有一个带有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>

所以，任何帮助将不胜感激。如果需要，我将使用Visual Studio 2012和.NET 4.0。按钮后面的代码在C＃中。谢谢你的时间。

Answer 1

我遇到了同样的问题，如下所示：

<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”））做同样的事情。对话框显示在灰色背景上。并且Post Post确实有效。

Answer 2

<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>

Answer 3

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

问题在于，如果你立即向后移动按钮，用于使屏幕其余部分变暗并使对话模式（即吃掉点击事件）的'overlay'div会阻止你的按钮点击发生在原版中位置。

一种解决方案是使用Change div的克隆作为模态，并绑定在原始按钮上调用click（）的单击处理程序。

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

__doPostBack("ctl00$button_name_here");

Answer 4

知道了，感谢你的帮助，它引导我朝着正确的方向前进。

    $(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;
        });
    });

链接按钮不适用于JQuery模式窗体

4 个答案: