2

ASP.NET Web ページ サイトで jQuery UI Modal Dialog ウィジェットを使用しようとしています。ただし、次のコードを使用すると、タイトル テキストのインラインではなく、閉じるアイコン (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 ダイアログ CSS が含まれていないため、不足しているコードが多数あります。再度ビルドし、ビルド時に jQuery ダイアログを含める必要があります。

于 2012-04-22T22:16:48.113 に答える