jQuery UI 模式对话框:在错误的位置关闭图标并调整其大小

jQuery UI Modal Dialog: Close and Resize Icons in Wrong Place

本文关键字：图标 调整 位置 对话框 模式 UI 错误 jQuery      更新时间：2023-09-26

我正在尝试使用 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>

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

你的自定义 jQuery UI CSS 文件 （jquery-ui-1.8.18.custom.css） 不包含 jQuery Dialog CSS，所以有一堆缺失的代码。您需要再次重建它，并在构建它时包含 jQuery 对话框。

相关文章：