jQuery UI 模态对话框：在错误的地方关闭和调整图标答案

【问题标题】：jQuery UI Modal Dialog: Close and Resize Icons in Wrong PlacejQuery UI 模态对话框：在错误的地方关闭和调整图标
【发布时间】：2012-04-23 06:16:48
【问题描述】：

我正在尝试在 ASP.NET 网页站点上使用 jQuery UI 模态对话框小部件。但是，当我使用以下代码时，我最终会得到一个对话框，其中关闭图标 (x) 在标题文本下方而不是与它内联，并且在对话框左侧，按钮上方的调整大小图标，而不是右下角，它应该在的位置。

你可以在这里看到我所说的一个例子：

http://www.cutrategamer.com/app/sandbox

这里是源代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link href="Styles/start/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>



    <script type="text/javascript">
        $(function () {

            // Dialog
            $('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

            // Dialog Link
            $('#dialog_link').click(function () {
                $('#dialog').dialog('open');
                return false;
            });

            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                    function () { $(this).addClass('ui-state-hover'); },
                    function () { $(this).removeClass('ui-state-hover'); }
                );

        });

        </script>

        <!-- Adding jquery UI stuff -->

    <style type="text/css">

            /*demo page css*/

            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}

            .demoHeaders { margin-top: 2em; }

            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

            ul#icons {margin: 0; padding: 0;}

            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}

            ul#icons span.ui-icon {float: left; margin: 0 4px;}

        </style>

</head>
<body>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->

        <h2 class="demoHeaders">Dialog</h2>

        <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>

        <!-- ui-dialog -->

        <div id="dialog" title="Dialog Title">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        </div>

</body>
</html>

谁能告诉我我需要做什么才能修复这个小部件？

【问题讨论】：

标签： javascript css jquery-ui jquery-ui-dialog asp.net-webpages

【解决方案1】：

您的自定义 jQuery UI CSS 文件 (jquery-ui-1.8.18.custom.css) 不包含 jQuery Dialog CSS，因此缺少大量代码。您需要重新构建它并在构建时包含 jQuery Dialog。

【讨论】：

这就是问题所在。谢谢。我已经下载了很多版本的 jQuery UI，以至于我的 css 文件被交叉了。 :)
是的，基本上确保您的 jquery-ui.js 版本与您的 jquery-ui.css 版本相同，因为我只是痛苦地发现这就像大海捞针一样......