单击按钮关闭jQuery对话框

I have a jQuery dialog box that I use as a form, when I click the button it performs what it needs to, but does not close. How would I go about making it close on button click.

我有一个jQuery对话框,我用作表单,当我单击按钮它执行它需要的,但不关闭。如何在按钮点击时关闭它。

My current code looks like this:

我当前的代码如下所示:

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

Button that opens the dialog:

打开对话框的按钮:

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>

Form inside the dialog box:

对话框内的表单:

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

3 个解决方案

#1

The close allows you to do exactly what it name suggests: close the dialog:

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

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

Also you seem to be calling this function inside the click event of some #ChangeHeatName. Make sure that you have canceled the default action if this is an anchor or a submit button to avoid the browser redirecting away from the page:

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

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

#2

Put all your code in one $(document).ready() and try this

将所有代码放在一个$(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

Since the button in inside the dialog box, use the code below:

由于对话框内的按钮,请使用以下代码:

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

DEMO HERE

#3

Below is the code for button in dialog and close the dialog on click

下面是对话框中按钮的代码,并在单击时关闭对话框

  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>

Open Dialog