Question

这是一个简单的对话框，如下面的代码，每当拖动对话框时，它的高度都会降低。当我设置对话框的resizable = false时，它的高度值甚至会改变。最后，我通过在dragStop事件处理程序中重新更新对话框高度来修复它。

我发现有一个类似的问题已被报告here，但它是在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+ */
}

Answer 1

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

                    dragStart: function (e, ui)
                    {
                        $(this).parent().height(height);
                    },
                    dragStop: function (e, ui)
                    {
                        $(this).parent().height(height);
                    }

Answer 2

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

 .ui-dialog {
              height:auto !important;
            }

Answer 3

jQuery 1.8终于彻底理解了盒子大小，我们不再需要调整它了：）

Documentation

如何在拖动过程中修复jQuery UI对话框大小？

3 个答案: