2

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

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

4

1 回答 1

3

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

于 2012-04-22T22:16:48.113 回答