单击按钮时关闭 jQuery 对话框答案

【问题标题】：Closing jQuery Dialog box on button click单击按钮时关闭 jQuery 对话框
【发布时间】：2024-05-22 22:10:01
【问题描述】：

我有一个用作表单的 jQuery 对话框，当我单击按钮时，它会执行所需的操作，但不会关闭。我将如何让它在按钮单击时关闭。

我当前的代码如下所示：

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
    $('#HeatNameDiv').dialog({
        autoOpen: false
    });
});
$(document).ready(function () {
    $('#Change_Heat_Name').click(function (e) {
        e.preventDefault();
        $('#HeatNameDiv').dialog('open');
    });
});
</script>

打开对话框的按钮：

Heat Name<input type="text" name="heat_name" value="@Html.ValueFor(x => x.heatname)" class="search-query" placeholder="Search" style ="width:100px"/>
        <button class="btn btn-success" id="Change_Heat_Name" value="Change_Heat_Name" name="action:Change_Heat_Name" type="button"> Change Heat Name</button>

对话框内的表格：

<div id="HeatNameDiv" title="Change Heat Name">
@using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post, new AjaxOptions(){UpdateTargetId = "chemDiv", InsertionMode = InsertionMode.Replace, OnSuccess = "$(document).ready(function () { $('#ChangeHeatName').click(function () { $('#HeatNameDiv').dialog('close');});});" }))
{
    <section>
        Heat Name:<input type="text" name="heatName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/>
        Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" />
        <input type="submit" name="ChangeHeatName" value="Change" />
    </section>
}

【问题讨论】：

不需要多个.ready

标签： javascript jquery asp.net-mvc

【解决方案1】：

close 允许您完全按照其名称进行操作：关闭对话框：

$('#HeatNameDiv').dialog('close');

你似乎在一些#ChangeHeatName的点击事件中调用了这个函数。如果这是锚点或提交按钮，请确保您已取消默认操作，以避免浏览器重定向离开页面：

$('#ChangeHeatName').click(function () {
    $('#HeatNameDiv').dialog('close');
    return false;
});

【讨论】：

是的，这条线应该可以正常工作。正如 jQuery UI 对话框的文档所述，如果你想关闭对话框，你应该使用 .dialog('close') 方法。如果您有任何疑问，请随时查阅文档：api.jqueryui.com/dialog/#method-close
我猜问题是当绑定到click事件时ChangeHeatName不在DOM中。 Live 可能会解决这个问题。
@DarinDimitrov 在这种情况下，ChangeHeatName 是弹出对话框中的按钮。它处理表单的提交，我希望在发生这种情况时关闭该框。按钮也提交的事实有什么影响吗？
@Danger_Fox，当然有效果。这取决于您所说的提交是什么意思。如果它在没有任何 AJAX 的情况下正常提交表单，则网页将被刷新，并且对话框无论如何都会关闭。另一方面，如果您使用 AJAX，那就完全不同了。在这种情况下，您可以在 AJAX 调用成功后调用 .dialog('close') 方法。不幸的是，如果您正在使用任何 AJAX 代码，您还没有显示，因此很难提供任何进一步的帮助。
我正在使用 AJAX。我将使用表格更新我的问题，以便您查看。很抱歉，我认为这将是一个纯 jQuery 的东西。

【解决方案2】：

将所有代码放在一个 $(document).ready() 中，然后试试这个

$(document).ready(function () {
    $('#HeatNameDiv').dialog({
        autoOpen: false
    });

    $('#Change_Heat_Name').click(function (e) {
        e.preventDefault();

        // This will open the dialog
        $('#HeatNameDiv').dialog('open');
    });

    $('#ChangeHeatName').click(function (e) {
        e.preventDefault();

        // This will close the dialog
        $('#HeatNameDiv').dialog('close');
    });
});

DEMO HERE

由于对话框内的按钮，使用下面的代码：

$('#ChangeHeatName').click(function (e) {
    e.preventDefault();
    $('.ui-icon-closethick').click();
});

DEMO HERE

【讨论】：

感谢您的帮助。唯一的问题是我要关闭它的按钮在对话框中。

【解决方案3】：

下面是对话框中按钮的代码，点击关闭对话框

  jQuery(document).ready(function ($) {
                $("#dialog").dialog({
                    autoOpen: false, 
                    show: {
                        effect: "blind",
                        duration: 1000
                    },

                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });

            $("#opener").click(function () {
                $("#dialog").dialog("open");
            });
            $("#Closer").click(function () {
                $("#dialog").dialog("close");
            });
        });

 <div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
   <button id="Closer">Close Dialog</button>
</div>

打开对话框

【讨论】：