Javascript jQuery UI 对话框不会第二次打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8700495/
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
jQuery UI Dialog not opening a second time
提问by Istiaque Ahmed
I am using jqueryuifor a dialog box. Clicking on the 'Click for a modal' link the first time works. When pressing the ESCkey, the dialog box disappears. But the clicks after that don't work. I want those to work as well. Refreshing the page makes everything OK.
我正在使用jqueryui作为对话框。第一次单击“单击模式”链接有效。按ESC键时，对话框消失。但是之后的点击不起作用。我希望那些也能工作。刷新页面使一切正常。
HTML:
HTML：
<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br />
<div class="demo" ">
<div id="dialog" title=" Upload Your Profile Picture" style="border1111:1px solid red; width:640px;">
this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is
</div><!-- end of id dialog -->
</div><!-- End demo -->
jQuery snippet:
jQuery 片段：
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".click_me").bind('click', function (e) {
e.preventDefault();
$("#dialog").css('border', '5px solid #848484');
$("#dialog").dialog({
width: 460
});
//$( "#dialog" ).dialog( "option", "height", 180 );
});
$("body").bind("keyup#dialog", function (event) {
// 27 == "esc"
if (event.which == 27) {
// TODO: close the dialog
// unbind the event
$("body").unbind("keyup.myDialog");
}
});
});
</script>
How can I make multiple clicks work?
我怎样才能使多次点击工作？
回答by Peter-Paul van Gemerden
Four things.
四件事。
Firstly, if the dialog should be reusable, you'll want to create it beforethe first click and set the autoOpenoption to false. To open the dialog, you should use dialog('open').
首先，如果对话框应该是可重用的，您需要在第一次单击之前创建它并将autoOpen选项设置为false。要打开对话框，您应该使用dialog('open').
For example:
例如：
$(document).ready(function () {
var dialog = $('#dialog');
dialog.dialog({ // <-- create the dialog
width: 460,
autoOpen: false
});
$(".click_me").bind('click', function (e) {
e.preventDefault();
dialog.dialog('open'); // <-- open the dialog
});
});
Note that I create a var dialogto save $('#dialog'). This is more efficient, because otherwise, jQuery would have to look for #dialogmultiple times in one piece of code.
请注意，我创建了一个var dialog以保存$('#dialog'). 这样效率更高，否则，jQuery 将不得不#dialog在一段代码中多次查找。
Secondly, you have an error in your HTML: there is one quote too many here:
其次，您的 HTML 中有错误：此处引用太多：
<div class="demo" ">
This might cause unexpected behaviour in some browsers (but not all), which makes it hard to debug. Remove the extra quote.
这可能会导致某些浏览器（但不是全部）出现意外行为，从而导致难以调试。删除多余的报价。
Thirdly, if I recall correctly, jQuery UI Dialog already handles the ESCkey, so you don't have to do that yourself. If you want to do something other than close the dialog when exscape is pressed, you should actually use the dialog's beforeCloseevent. If all you want to do is close the dialog; you're all set. :-)
第三，如果我没记错的话，jQuery UI Dialog 已经处理了ESC密钥，所以你不必自己做。如果您想在按下 exscape 时执行除关闭对话框之外的其他操作，您实际上应该使用对话框的beforeClose事件。如果您只想关闭对话框；你都准备好了。:-)
And finally, it's good practice not to use inline styles. So instead of this:
最后，最好不要使用内联样式。所以而不是这个：
<a href="" class="click_me" style="font-size:15px;">Click for a modal</a>
Create a CSS file with the following:
使用以下内容创建一个 CSS 文件：
.click_me {
font-size:15px;
}
You can do the same for #dialog, including the border you're now applying with JavaScript:
您可以对 执行相同的操作#dialog，包括您现在使用 JavaScript 应用的边框：
#dialog {
border: 5px solid #848484;
width:640px;
}
Hope this helps.
希望这可以帮助。
Here is a working example which applies the four points I mentioned: http://jsfiddle.net/PPvG/yHTJw/
这是一个应用我提到的四点的工作示例：http: //jsfiddle.net/PPvG/yHTJw/
Note that the jQuery UI styles are missing, so the dialog is a bit ugly. :-)
请注意，缺少 jQuery UI 样式，因此对话框有点难看。:-)
To ensure the Dialog works as expected, make sure that you are using the latest versions of jQuery and jQuery UI and that you include a jQuery UI Theme.
为确保对话框按预期工作，请确保您使用的是最新版本的 jQuery 和 jQuery UI，并且包含 jQuery UI 主题。
Here is an example where everything is loaded via Google CDN:
这是一个通过Google CDN加载所有内容的示例：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
Include these in the <head>of your HTML. The result should look like this. If it doesn't, you can try a couple of things:
将这些包含在<head>您的 HTML 中。结果应该是这样的。如果没有，您可以尝试以下几种方法：
- Have a look at your browser's JavaScript console (every modern browser has one; Google it).
- Try a different browser.
- Try a different way of loading the page (e.g. via
file://versus vialocalhost). - (Extreme case:) Try a different computer and a different internet connection.
- 查看浏览器的 JavaScript 控制台（每个现代浏览器都有一个；谷歌它）。
- 尝试不同的浏览器。
- 尝试不同的页面加载方式（例如 via
file://与 vialocalhost）。 - （极端情况：）尝试不同的计算机和不同的互联网连接。
If none of those work, I'm sorry to say, but... "you're doing it wrong". :-P
如果这些都不起作用，我很抱歉地说，但是......“你做错了”。:-P
Note that the snippet above will include the default jQuery UI theme called "base". If it doesn't fit your needs, you can use Google CDN for a few other default themes (see this blog post), or you can create your own theme using ThemeRoller.
请注意，上面的代码段将包含名为“base”的默认 jQuery UI 主题。如果它不符合您的需求，您可以将 Google CDN 用于其他一些默认主题（请参阅此博客文章），或者您可以使用ThemeRoller创建您自己的主题。
Edit:
编辑：
To make sure the Dialog retains focus (and thus is closed when the user presses ESC, even if the user clicked somewhere else on the page), try setting modalto true:
要确保 Dialog 保持焦点（因此在用户按下时关闭ESC，即使用户单击页面上的其他位置），请尝试设置modal为 true：
$('#dialog').dialog({
autoOpen: false,
modal: true
});
jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/
jsFiddle：http: //jsfiddle.net/PPvG/yHTJw/3/
Normally, the user can still interact with other items on the page (and, consequently, those items can grab focus away from the Dialog). When the modaloption is set to true, the user can no longer iteract with the rest of the page and the Dialog will keep focus no matter what.
通常，用户仍然可以与页面上的其他项目交互（因此，这些项目可以从对话框中获取焦点）。当该modal选项设置为 时true，用户无法再与页面的其余部分进行交互，并且 Dialog 无论如何都会保持焦点。
Hope this helps.
希望这可以帮助。
回答by redmoon7777
try using $("#dialog").close();instead of $("body").unbind("keyup.myDialog");
尝试使用$("#dialog").close();代替$("body").unbind("keyup.myDialog");
回答by vipinlalrv
.dialog({
title: "Confirmation",
modal: true, zIndex: 10000, autoOpen: true,
resizable: false,
width: 1000,
height: 530,
maxHeight: 1000,
minHeight: 200,
closeOnEscape: false,
buttons: {
Yes: function () {
CLOSEDDPROJECT.confirmCancelRequest();
$(this).dialog("close");
},
No: function () {
$(this).dialog("destroy");
$('.propagateRA').prop('checked', false);
}
},
close: function () {
$(this).remove();
}
});
try using $(this).dialog("destroy"); instead of $(this).dialog("close");
尝试使用 $(this).dialog("destroy"); 而不是 $(this).dialog("close");
