JQueryUI 对话框大小答案

【问题标题】：JQueryUI Dialog SizeJQueryUI 对话框大小
【发布时间】：2011-08-03 07:22:46
【问题描述】：

我是 JQueryUI 的新手，虽然我有一个对话框在工作，但它并没有以我认为我指定的大小打开。为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小？如何将其设置为 600 像素 x 500 像素？

这是定义对话框的 div：

<div id="dialog-form" title="Create Appointment">   
  <form> . . . </form>
</div>

下面是创建对话框的 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() {
        }
    });

以及定义打开按钮的 JavaScript：

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog("open");
    });
});

编辑：

我现在看到了问题：这本来可以正常工作的，但我是在 Google Chrome 中使用--app=... 命令行选项运行它，所以它不会重新加载整个应用程序。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

问题：为什么在定义对话框时设置宽度和高度不会影响对话框的初始大小？

Answer: 它确实...您使用的是什么浏览器以及 jQuery 的版本。

我将您的代码从上面剪切/粘贴到一个小示例中，它运行良好...我在下面粘贴了完整示例，您可以尝试一下。

 <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>

【讨论】：

就这样：它正在工作。由于我看不到它，请参阅上面的编辑。

【解决方案2】：

我不知道到底发生了什么，但你可以稍微改变一下你的代码，它会产生你期望的结果：

您可以在 onclick 事件中设置这些选项，而不是使用 autoOpen：

$("#create-appt")
    .button()
    .click(function() {
        $("#dialog-form").dialog({width: 600,height:500});
    });

我希望这会有所帮助最好的祝福，马塞洛·维斯马里

【讨论】：

我之前也尝试过，结果是一样的；原因请参阅我的最新编辑。