我对 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>
当我点击按钮时,对话框的标题栏出现,页面背景变暗,但有两个问题:
- 对话框主体不显示(只显示标题栏)
- 当我在对话框外单击时,对话框不会关闭。我必须单击 Angular 落的“x”才能关闭对话框。
我在这里阅读了大量相关问题,但我尝试的任何方法似乎都不起作用。有什么建议吗?
最佳答案
我相信您遇到的问题来自这一行:
dialog.hide();
我的建议是从对话框 div 中删除所有对话框内容,并在实际显示对话框时填充它。
<div id="dialog"></div>
function showDialog()
{
$("#dialog").html("Dialog Text.");
$("#dialog").dialog("open");
}
至于处理关闭部分,您是否尝试过将主页中的所有内容嵌套在 <div>
中?自己然后处理那个点击事件?
<div id="mainPageDiv">
</div>
$("#mainPageDiv").click(function(){
$("#dialog").dialog("close");
});
关于javascript - jQuery UI 对话框不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13994896/