javascript - 如何阻止 jQuery UI 对话框被压扁？

Question

我有一个相当简单的 div 元素，我想通过 jQuery UI 将其变成弹出窗口。 HTML 基本上是

<div id="login_form">
     <table> ... </table>
</div>

在没有任何 jQuery 参与的情况下，它呈现得相当自然(绿色背景来自 div 并适合其内容):

当我用这段代码把它变成一个弹出窗口时:

 $(document).ready(function()
{
    $("#login_form") .dialog (
    {
        autoOpen: false
    });

    $("#login_or_sign_up") .click (function()
    {
        $("#login_form") .dialog ("open");
    });
});

它是这样呈现的。

恶心。

我很确定原因很简单，就是我没有包含 jQuery UI CSS 文件。 我不想包含 jQuery UI CSS 文件。

通过检查弹出窗口，我注意到 jQuery 已经创建了另一个围绕我提供的 div 的 div，并且它的样式设置为宽度为 300 像素。我预计这就是问题所在——jQuery UI 选择的尺寸太小，内部元素不会自行缩小以适合。

我可以让 jQuery 对话化我的 div 而不缩小它吗？

如果没有，我可能可以通过向内部元素单独添加 width:100% 样式来解决这个问题。在那种情况下，是否有不需要我更改任何内部元素的通用解决方法？

Answer 1

.dialog({ width: 'auto' }) 有效。