javascript jQuery UI 对话框不出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13994896/
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 box does not appear
提问by Nate
I'm pretty much a total noob to JavaScript and jQuery and I'm having trouble getting a basic dialog box working. Here is my code:
我对 JavaScript 和 jQuery 几乎是个菜鸟，而且我在让基本对话框工作时遇到了麻烦。这是我的代码：
<script type="text/javascript">
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
dialog.hide();
});
function showDialog() {
$("#dialog").dialog("open");
}
$("ui-widget-overlay").click(function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
</script>
<div id="dialog">
Dialog text.
</div>
<button onclick="showDialog()">Show Dialog</button>
When I click the button, the title bar of the dialog comes up and the background of the page dims, but there are two problems:
当我点击按钮时，对话框的标题栏出现，页面背景变暗，但是有两个问题：
- The body of the dialog does not show (all that shows is the title bar)
- When I click outside of the dialog, the dialog does not close. I have to click the "x" in the corner in order for the dialog to close.
- 对话框的主体不显示（显示的只是标题栏）
- 当我在对话框外单击时，对话框不会关闭。我必须单击角落中的“x”才能关闭对话框。
I've been reading tons of related questions on here, but nothing I try seems to work. Any advice?
我一直在这里阅读大量相关问题，但我尝试的任何内容似乎都不起作用。有什么建议吗？
回答by AJ.
I believe the problem you're having is from this line:
我相信您遇到的问题来自这一行：
dialog.hide();
What I would suggest is removing all of the dialog content from the dialog div and populating it when you actually show the dialog.
我的建议是从对话框 div 中删除所有对话框内容，并在您实际显示对话框时填充它。
<div id="dialog"></div>
function showDialog()
{
$("#dialog").html("Dialog Text.");
$("#dialog").dialog("open");
}
As for handling the close part, have you tried nesting everything in the main page in a <div>of its own and then handling that click event?
至于处理关闭部分，您是否尝试过将主页中的所有内容单独嵌套<div>，然后处理该点击事件？
<div id="mainPageDiv">
</div>
$("#mainPageDiv").click(function(){
$("#dialog").dialog("close");
});
回答by jbabey
Just use a modal dialog and close the dialog when they click the overlay. Also, you should not need to put any code in $(document).readyfor this.
只需使用模态对话框并在单击叠加层时关闭对话框。此外，您不需要为此输入任何代码$(document).ready。
function showDialog() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
open: function () {
$('.ui-widget-overlay').bind('click', function () {
dialog.dialog('close');
});
}
});
}
回答by Mark Schultheiss
I am adding this as an additional answer as it goes about this differently, changing the markup, removing the in-line event handler in the markup, uses your button, and uses your dialog variable (differently than you, but...
我将此添加为附加答案，因为它以不同的方式进行，更改标记，删除标记中的内联事件处理程序，使用您的按钮，并使用您的对话框变量（与您不同，但是......
<div id="dialog">
Dialog text.
</div>
<button id="showDialog">Show Dialog</button>
and the code for that markup:
以及该标记的代码：
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
$('#showDialog').click(function() {
dialog.dialog("open");
});
$(document).on('click', ".ui-widget-overlay", function() {
dialog.dialog("close");
});
});
回答by Mark Schultheiss
I see your:
我看到你的：
$("ui-widget-overlay").click(
perhaps should select a class:
也许应该选择一个类：
$(".ui-widget-overlay").click(
which does not happen as it does not exist, so you need to hook it to the document.
这不会发生，因为它不存在，因此您需要将其挂钩到文档。
and the dialog.hide();is not needed as it hides it automatically when it becomes a dialog
并且dialog.hide();不需要，因为当它变成对话框时它会自动隐藏它
SO you should have:
所以你应该有：
$(document).on('click',".ui-widget-overlay", function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
more simply:(if you have no other dialogs you need to deal with this way)
更简单：（如果您没有其他对话框，则需要以这种方式处理）
$(document).on('click',".ui-widget-overlay", function() {
$("#dialog").dialog("close");
});
sample fiddle to show full reworked code: http://jsfiddle.net/GrFE3/2/
示例小提琴显示完整的返工代码：http: //jsfiddle.net/GrFE3/2/
