jquery-UI模态窗体关闭按钮显示位置答案

【问题标题】：Jquery-UI modal form close button display positionjquery-UI模态窗体关闭按钮显示位置
【发布时间】：2013-01-29 17:07:34
【问题描述】：

jquery ui 模态表单右上角的关闭按钮出现显示问题。我有一个例子：http://jqueryui.com/dialog/#modal-form

所以我做了：http://jsbin.com/atenac/3/edit

如果您单击创建新用户，您应该会看到关闭图标未正确显示。

我使用 chrome（最新）和 IE9 进行了测试。它从实际容器的右下角显示。

主题有问题，还是我遗漏了什么？如果您更改为基本 cdn，它可以工作，但对于任何其他 css，它都无法正常工作。

代码：

<head>
    <!-- base cdn: http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css-->
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

</head>
<body>
    <div id="dialog-form" title="Create new user">
        <p class="validateTips">
            All form fields are required.</p>
        <form>
        <fieldset>
            <label for="name">
                Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
            <label for="email">
                Email</label>
            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
            <label for="password">
                Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
        </form>
    </div>
    <button id="create-user">
        Create new user</button>
</body>
<script>
    $(function () {
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": function () {
                    allFields.removeClass("ui-state-error");
                    $(this).dialog("close");

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#create-user")
                  .button()
                  .click(function () {
                      $("#dialog-form").dialog("open");
                  });
    });
</script>

【问题讨论】：

还应该包括你的一些代码，而不仅仅是链接，这样当链接失效时这篇文章仍然有用。
谢谢，我现在也添加了代码

标签： jquery-ui position

【解决方案1】：

您似乎使用了不正确的样式表（1.9.0 版）。链接到 CSS 的 1.10.0 版本似乎已经修复了它： http://jsbin.com/atenac/8/edit

正确的 CSS 链接是： http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css

【讨论】：