jQuery JQueryUI 对话框大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5625835/
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
JQueryUI Dialog Size
提问by JasonFruit
I'm new to JQueryUI, and though I have a dialog working, it doesn't open at the size I think I'm specifying. Why does setting the width and height when the dialog is defined not affect the initial size of the dialog? How do I make it 600px by 500 px?
我是 JQueryUI 的新手，虽然我有一个对话框在工作，但它没有以我认为我指定的大小打开。为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小？我如何使它 600 像素乘 500 像素？
Here is the div that defines the dialog:
这是定义对话框的 div：
<div id="dialog-form" title="Create Appointment">
<form> . . . </form>
</div>
Here is the JavaScript that makes a dialog of it:
这是创建它的对话框的 JavaScript：
$(function() {
$("#dialog-form").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
modal: true,
buttons: {
"Create": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
}
});
And the JavaScript that defines the button to open it:
以及定义用于打开它的按钮的 JavaScript：
$("#create-appt")
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
});
Edit:
编辑：
I see the problem now: this would have worked fine, except I was running it in Google Chrome using the --app=...command-line option, so it was not reloading the whole application.
我现在看到了问题：这本来可以正常工作，除非我使用--app=...命令行选项在 Google Chrome 中运行它，因此它没有重新加载整个应用程序。
回答by Todd
Question: Why does setting the width and height when the dialog is defined not affect the initial size of the dialog?
问题：为什么在定义对话框时设置宽高不影响对话框的初始大小？
Answer: It does... what browser are you using and version of jQuery.
答：它确实...您使用的是什么浏览器和 jQuery 版本。
I cut/pasted your code from above into a small sample and it worked perfectly... I pasted the full sample below you can try it on your end.
我将您的代码从上面剪切/粘贴到一个小示例中，并且效果很好……我粘贴了下面的完整示例，您可以尝试一下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
$("#dialog-form").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
modal: true,
buttons: {
"Create": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
}
});
});
$("#create-appt")
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
});
</script>
</head>
<body>
<h1>test</h1>
<div id="dialog-form" title="Create Appointment">
<p> this is my test </p>
</div>
<input type="button" id="create-appt" value="test"/>
</body>
</html>
回答by Vismari
I don't know exactly what it's happening, but you can change a little bit your code and it'll produce the result you expect:
我不知道到底发生了什么，但是您可以稍微更改一下代码，它会产生您期望的结果：
Instead of use autoOpen you can set these options on the onclick event:
您可以在 onclick 事件上设置这些选项，而不是使用 autoOpen：
$("#create-appt")
.button()
.click(function() {
$("#dialog-form").dialog({width: 600,height:500});
});
I hope this helps best regards, Marcelo Vismari
我希望这有助于最好的问候，马塞洛·维斯马里
