Модальное диалоговое окно пользовательского интерфейса jQuery: закрытие и изменение размера значков в неправильном месте

Я пытаюсь использовать виджет jQuery UI Modal Dialog на сайте веб-страниц ASP.NET. Однако, когда я использую следующий код, я получаю диалоговое окно со значком закрытия (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
person Tod Birdsall    schedule 22.04.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Ваш пользовательский CSS-файл пользовательского интерфейса jQuery (jquery-ui-1.8.18.custom.css) не включает CSS диалогового окна jQuery, поэтому в нем отсутствует часть кода. Вам нужно будет перестроить его снова и включить jQuery Dialog при его создании.

person jdhartley    schedule 22.04.2012
comment
В этом была проблема. Спасибо. Я загрузил так много версий пользовательского интерфейса jQuery, что мои файлы css пересеклись. :) - person Tod Birdsall; 23.04.2012
comment
Да, в основном убедитесь, что ваши версии jquery-ui.js такие же, как и ваши jquery-ui.css, так как я только что с болью обнаружил, что это может быть похоже на поиск иголки в стоге сена... - person JsonStatham; 05.06.2015