单击按钮时关闭 jQuery 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16003865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Closing jQuery Dialog box on button click
提问by Danger_Fox
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>
}
回答by Darin Dimitrov
The closeallows you to do exactly what it name suggests: close the dialog:
将close让你做正是它名字所暗示的：关闭该对话框：
$('#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:
此外，您似乎在 some 的 click 事件中调用了此函数#ChangeHeatName。如果这是一个锚点或提交按钮，请确保您已取消默认操作，以避免浏览器重定向离开页面：
$('#ChangeHeatName').click(function () {
$('#HeatNameDiv').dialog('close');
return false;
});
回答by pala?н
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');
});
});
Since the button in inside the dialog box, use the code below:
由于对话框内的按钮，请使用以下代码：
$('#ChangeHeatName').click(function (e) {
e.preventDefault();
$('.ui-icon-closethick').click();
});
回答by Mian Numan
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
打开对话框
