Question

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

Answer 1

close允许您完全按照其名称建议：关闭对话框：

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

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

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

Answer 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

Answer 3

下面是对话框中按钮的代码，单击

关闭对话框

    var jq111 = jQuery.noConflict();

    jq111( ".main-cat" ).click(function() {
            jq111(this).find( ".child" ).toggle( "slow" );
    });

打开对话框

按钮单击关闭jQuery对话框

3 个答案: