关闭按钮上的jQuery对话框单击
我有一个jQuery对话框,我用它作为窗体,当我点击按钮时,它执行需要的但不关闭的按钮。我将如何去关闭点击按钮。关闭按钮上的jQuery对话框单击
我当前的代码如下所示:
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>
对话框内形式:在打开的对话框
<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>
按钮
<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>
}
的close
允许你这样做到底是什么顾名思义:关闭对话框:
$('#HeatNameDiv').dialog('close');
而且你似乎在呼吁的一些#ChangeHeatName
click事件中此功能。请确保您已经取消默认的动作,如果这是锚或提交按钮,以避免浏览器的页面重定向远:
$('#ChangeHeatName').click(function() {
$('#HeatNameDiv').dialog('close');
return false;
});
OP已经具有该行他的代码 –
是的,这条线应该很好。作为jQuery UI对话框的文档,如果你想关闭对话框,你应该使用'.dialog('close')'方法。不要犹豫,以防万一你有一些疑问,请参考文档:http://api.jqueryui.com/dialog/#method-close –
我想问题是,ChangeHeatName不绑定到DOM时,点击事件。现场可能会解决这个问题。 – alexn
把所有的代码在一个$(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');
});
});
由于在对话框内的按钮,使用下面的代码:
$('#ChangeHeatName').click(function (e) {
e.preventDefault();
$('.ui-icon-closethick').click();
});
感谢您的帮助。唯一的问题是我想关闭它的按钮在对话框中。 –
该演示版本是否适合您? –
@Danger_Fox我已经更新了代码。尝试一次! –
下面是在对话框按钮的代码,然后关闭上单击对话框
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>
打开对话框
多个'.ready'不练琴 –