2

这是一个简单的对话框，如下代码所示，只要拖动对话框，它的高度就会降低。当我设置对话框的 resizable = false 时，它​​的高度值甚至发生了变化。最后，我通过在 dragStop 事件处理程序中重新更新对话框高度来修复它。

我发现这里报告了一个类似的问题，但它与 IE 相关，作者建议不要设置高度值，恕我直言并不适合所有用例。

我正在使用 Chrome 和 jQuery UI 1.8.19

<p><a id="edit" href="#">Open Editor</a></p>
<div id="editor"></div>

$(document).ready(function ()
    {
        $("#edit").on("click", function ()
        {
                var $dialog = $("#editor")
                .dialog(
                {
                    title: "HTML Editor",
                    modal: true,
                    autoOpen: false,
                    width: 600,
                    height: 350,
                    minWidth: 300,
                    minHeight: 200,
                    closeOnEscape: true,
                    resizable: false,
                    open: function ()
                    {
                    },
                    buttons:
                    {
                        "Save": function ()
                        {
                            $(this).dialog("close");
                        },
                        "Cancel": function ()
                        {
                            $(this).dialog("close");
                        }
                    },
                    dragStop: function (e, ui)
                    {
                        $(this).dialog("option", "height", "377px");
                    }
                });
            }

            $dialog.dialog("open");
            return false;
        });
    });

更新 1：我刚刚创建了一个新项目（ASP.NET MVC 4），发现当我使用以下 CSS 规则时出现了问题，为什么？

*
{
    margin: 0;
    padding: 0;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
4

3 回答 3

3

jQuery 在使用 box-sizing:border-box （使用默认模板）时错误地计算对话框大小。我通过在 open 事件中存储对话框的高度进行了修复，并在 dragStart/dragStop 事件中手动设置了对话框高度：

                    dragStart: function (e, ui)
                    {
                        $(this).parent().height(height);
                    },
                    dragStop: function (e, ui)
                    {
                        $(this).parent().height(height);
                    }
于 2012-07-09T10:37:56.160 回答
2

我通过使用简单的 css 修复了它：

 .ui-dialog {
              height:auto !important;
            }
于 2015-02-25T07:39:08.283 回答
1

jQuery 1.8 终于彻底理解了 box-sizing，我们不再需要调整它了 :)

文档

于 2012-08-20T05:23:43.273 回答