关闭jQuery对话框 [英] Close the dialog box of Jquery
本文介绍了关闭jQuery对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨
我对使用Jquery和MVC非常陌生，并且我很难在单击按钮时关闭对话框.以下是该场景的详细信息.
我有一个.cshtml页面，使用$(
Hi
I''m pretty new to using the Jquery and MVC and I''m having pretty tough time to get a dialog box closed on a button click.Here is the scenario in detail.
I have a .cshtml page which I''m displaying in the JQuery dialog box by using the $(
).load(url).dialog("open")在"jQuery"对话框中显示.该对话框成功显示. ''m显示在URL中，我有2个按钮可以执行搜索或关闭对话框并返回屏幕.不幸的是，关闭功能无法正常工作
这是用于加载对话框的代码.
这是用于加载对话框的代码.
).load(url).dialog("open").The dialog gets successfully displayed.In that page which I''m displaying in the URL,I have 2 buttons to to perform a search or close the dialog and go back to screen.Unfortunately the functionality of the close is not working as expected
Here is the code for loading the dialog.
Here is the code for loading the dialog.
$(document).ready($(function () {
$('#searchFacility').button().on("click", function () {
//showUrlInDialog('/Home/FacilitySearch');
$("#modalSearch").load('/Home/FacilitySearch').dialog({ autoOpen: false, modal: true, close: function (event, ui) {
$("#modalSearch").empty().dialog('destroy');
alert('Dialog closing');
}
}).dialog('open');
return false;
});
这是取消点击"的代码:
And here is the code for the Cancel Click:
$(document).ready($(function () {
$("#btnCancel").button().on("click", function () {
alert('hi');
$("#modalDialog").dialog('close');
});
}));
<
click事件已成功执行，但对话框仍然存在并在按下"esc"键或单击对话框顶部的"X"时消失.
这是浏览器中生成的输出.
The click event is successfully getting executed but the dialog is still persistent and goes away when "esc" key is pressed or "X" on top of the dialog is clicked.
Here is the output generated in the browser.
<pre lang="xml"><div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 1000px; position: absolute; left: 449px; top: 0px; display: block; z-index: 1001; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-modalSearch"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-modalSearch"> </span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="modalSearch" style="display: block; width: auto; min-height: 417px; height: auto; " class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
<title>Facility Search</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css">
<link href="/Content/themes/redmond/jquery-ui-1.8.18_Redmond.css" rel="stylesheet" type="text/css">
<h3>Facility Search</h3>
<div>
<table class="Facilitytable" width="50%">
<tbody><tr>
<td>
<table cellpadding="1px" cellspacing="0">
<tbody><tr id="NameAddressLabels">
<td id="NameLabel">
Name
</td>
<td id="AddresslblCell">
Address
</td>
<td id="CityCell">
City
</td>
<td id="StateZipCell">
<table width="100%" cellspacing="1px" cellpadding="1px">
<tbody><tr>
<td style="width: 40%">
State
</td>
<td>
Zip
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="NameAddressInputs">
<td id="NameInputCell">
<input id="Name" name="Name" type="text" value="">
</td>
<td id="AddressInputCell">
<input id="StreetAddress" name="StreetAddress" style="width:225px" type="text" value="">
</td>
<td id="CityInputCell">
<input id="City" name="City" style="width:85px" type="text" value="">
</td>
<td id="StatesZipCell">
<table>
<tbody><tr>
<td id="StateSelectCell">
<select id="State" name="State"><option>AT</option>
<option>BT</option>
<option>CT</option>
<option>DT</option>
<option>ET</option>
</select>
</td>
<td id="ZipEntryCell">
<input id="ZipCode" name="ZipCode" style="width:60px" type="text" value="">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="StartsEndsCounty">
<td id="StartsWithEndsWithOptionsCell">
<table>
<tbody><tr>
<td><input id="Contains" name="Contains" type="checkbox" value="true"><input name="Contains" type="hidden" value="false"> Contains
</td>
<td><input id="StartsWith" name="StartsWith" type="checkbox" value="true"><input name="StartsWith" type="hidden" value="false"> Starts With
</td>
</tr>
</tbody></table>
</td>
<td style="width:35%"></td>
<td style="text-align: right" align="right" id="CountyCell">
County :
</td>
<td id="CountyInput" style="text-align: right">
<input id="County" name="County" style="width:85px" type="text" value="">
</td>
</tr>
</tbody></table>
<table>
<tbody><tr id="NumericalSearchLabels">
<td class="alignright" style="width:33%">
<input type="submit" id="btnSearch" value="Search" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</td>
</tr>
</tbody></table>
<table>
</table>
</td>
</tr>
</tbody></table>
</div>
</div><div class="ui-resizable-handle ui-resizable-n"></div><div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-w"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; "></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; "></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; "></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; "></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button></div></div></div>
</pre>
</div>推荐答案
(
).load(url).dialog("open").The dialog gets successfully displayed.In that page which I''m displaying in the URL,I have 2 buttons to to perform a search or close the dialog and go back to screen.Unfortunately the functionality of the close is not working as expected
Here is the code for loading the dialog.
Here is the code for loading the dialog.
).load(url).dialog("open").The dialog gets successfully displayed.In that page which I''m displaying in the URL,I have 2 buttons to to perform a search or close the dialog and go back to screen.Unfortunately the functionality of the close is not working as expected
Here is the code for loading the dialog.
Here is the code for loading the dialog.
(document).ready(
(function () {
这篇关于关闭jQuery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
