JQuery UI Dialog - отсутствует значок закрытия

188

Я использую собственную тему jQuery 1.10.3. Я скачал каждую прямую с ролика темы, и я намеренно ничего не изменил.

Я создаю диалоговое окно и получаю пустой серый квадрат, где должен быть значок закрытия: Снимок экрана: отсутствует значок закрытия

Я сравнил код, который генерируется на моей странице:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

к коду, созданному на демонстрационной странице Dialog :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

РЕДАКТИРОВАТЬ: jQueryUI генерирует различные части кода , а не я, поэтому я не могу просто добавить теги span без редактирования файла jqueryui js, который кажется плохим / ненужным выбором для достижения нормальной функциональности.

Вот используемый javascript, который генерирует эту часть кода:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

Я в растерянности и мне нужна помощь. Заранее спасибо.

Сион Темный
источник
1
Вы проверили, существует ли файл изображения для иконки в вашей файловой системе?
Тикелоу
Да, лист с изображением значка существует и находится в правильном месте.
Xion Dark

Ответы:

443

Я опаздываю к этому на некоторое время, но я собираюсь взорвать ваш разум, готов?

Причина, по которой это происходит, в том, что вы вызываете загрузчик, после того, как вы вызываете jquery-ui.

Буквально, поменяйте местами так, чтобы вместо:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

это становится

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Редактировать - 26/06/2015 - это продолжает вызывать интерес спустя месяцы, поэтому я подумал, что это стоит редактировать. Мне действительно очень нравится решение noConflict, предложенное в комментарии под этим ответом и разъясненное пользователем Pretty Cool в качестве отдельного ответа. Некоторые сообщали о проблемах с подсказкой начальной загрузки при замене сценариев. Однако я не столкнулся с этой проблемой, потому что я загружал jquery UI без всплывающей подсказки, так как мне это не нужно, потому что он запускается. Так что эта проблема никогда не возникала у меня.

Редактировать - 22/07/2015 - Не путайте jquery-uiс jquery! В то время как JavaScript Bootstrap требует, чтобы jQuery был загружен раньше, он не использует jQuery-UI. Так что jquery-ui.jsможет быть загружен после bootstrap.min.js, в то время как jquery.jsвсегда должен быть загружен до Bootstrap.

Дэвид Г
источник
7
Это исправило мою проблему. Я включил ресурсы в следующем порядке: 1) ядро ​​JQuery 2) загрузчик 3) JQueryUI. Спасибо за вашу помощь; лучше поздно, чем никогда! PS - вы взорвали меня.
Xion Dark
6
Даже позже ... Можете ли вы объяснить, ПОЧЕМУ порядок загрузки бутстрапа имеет к этому отношение?
AndyC
4
Если вы меняете порядок Bootstrap перед Jquery UI, то всплывающие подсказки Bootstrap работать не будут.
Ви
4
Хотя на самом деле это не очень хорошее решение, я проголосовал за него, потому что он дает быстрый способ убедиться, что это проблема. Я лично буду использовать решение Рауля Ривероса в конце, потому что простое переключение двух сценариев вызовет много других, более серьезных проблем. Кстати, я был немного взволнован, когда я увидел это.
Кроу
18
Если вы не хотите изменять порядок Bootstrap и jQuery UI, вы также можете исправить кнопку: $.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517
l.poellabauer
45

Это комментарий к верхнему ответу, но я чувствовал, что он того стоил, потому что он помог мне решить проблему.

Если вы хотите, чтобы Bootstrap был объявлен после пользовательского интерфейса JQuery (я сделал это потому, что хотел использовать всплывающую подсказку Bootstrap), объявив следующее (я объявил об этом позже $(document).ready), кнопка снова появится (ответ с https://stackoverflow.com/ а / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
Довольно круто
источник
Это довольно приятный способ сделать что-то, не сильно мешая звонкам. +1 за то же самое.
Аалок Мишра
вмешиваться в классы Баттона
Стефано Мтангу
1
Проблема с этим решением состоит в том, что это нарушит код, где вы хотите использовать функциональность кнопки начальной загрузки, например кнопку («загрузка»). Чтобы убедиться, что существующая функциональность кнопки начальной загрузки все еще работает, замените все ссылки вызовов функции buttontrap "button ()" на "bootstrapBtn ()". (Да, я знаю, что комментарии к коду вроде бы подразумевают это, но я подумал, что это стоит явно сказать.)
Kornél Regius
Разве ваш редактор не жалуется на пропущенные точки с запятой?
Р. Шреурс
22

Похоже, это ошибка в способе доставки jQuery. Вы можете исправить это вручную с некоторой манипуляцией dom на Dialog Openсобытии:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});
KyleMit
источник
8
К сведению будущих читателей, вы можете расширить ui.dialog (ссылка), чтобы вам не приходилось дублировать эту открытую функциональность при каждом вызове.
Джон Макинтайр
2
Это сработало довольно хорошо. Икс был немного дальше, чем обычно, хотя ... не знаю точно, почему.
ashlar64
Отличное решение! Однако в моем случае removeClass (...) был ненужным и вызывал неуместную кнопку X слева от диалогового окна. Простое связывание метода html () с методом find () сделало свою работу. Спасибо.
Аамир
16

Это сообщается как сломанный в 1.10

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

Филлип 29 января 2013 года в 7:36 сказал: В версиях CDN отсутствует кнопка закрытия диалога. Там есть только тег кнопки, UI-значок span отсутствует.

Я скачал предыдущую версию, и X для кнопки закрытия показывает назад.

Роберт
источник
Я использую 1.10.3, но, по крайней мере, теперь я чувствую себя менее сумасшедшим. Я решил просто игнорировать это сейчас. Спасибо.
Xion Dark
Я могу подтвердить, что это все еще проблема в 1.10.3
Frug
Все тот же в 1.10.4
Dbloch
Та же проблема в 1.12.1
TetraDev
15

Я нашел три исправления:

  1. Вы можете просто загрузить bootsrap в первую очередь. И их загружают jquery-ui. Но это не очень хорошая идея. Потому что вы увидите ошибки в консоли.
  2. Это:

    var bootstrapButton = $.fn.button.noConflict();
    $.fn.bootstrapBtn = bootstrapButton;

    помогает. Но другие кнопки выглядят ужасно. И теперь у нас нет кнопок начальной загрузки.

  3. Я просто хочу использовать стили начальной загрузки, а также хочу иметь кнопку закрытия со значком. Я сделал следующее:

    Как выглядит кнопка закрытия после исправления

    .ui-dialog-titlebar-close {
        padding:0 !important;
    }
    
    .ui-dialog-titlebar-close:after {
        content: '';
        width: 20px;
        height: 20px;
        display: inline-block;
        /* Change path to image*/
        background-image: url(themes/base/images/ui-icons_777777_256x240.png);
        background-position: -96px -128px;
        background-repeat: no-repeat;
    }
Евгений Чернявский
источник
Отлично! Если у вас нет установленного файла изображения или какой-либо конкретной темы, вы можете получить его здесь: jqueryui.com/themeroller . Скачайте тему и выберите нужные компоненты (в данном случае диалог). Затем загрузите, распакуйте, откройте папку темы или изображения и скопируйте файл изображения, соответствующий вашей теме, в ваш проект. Затем измените ссылку на CSS, предоставленную Yauheni в своем ответе.
Exel Gamboa
Ваш пункт 3 решил проблему для меня. Мне просто нужно немного изменить ширину, высоту и положение фона, чтобы кнопка выглядела так, как я хотел. Спасибо.
Вималан Джая Ганеш
9

У меня была та же самая проблема, может быть, вы уже решили эту проблему, но решили ее, просто поместив папку «images» в то же место, что и jquery-ui.css

Хуан Эрнандес
источник
3
На самом деле это ответ, который решил проблему для меня, или, по крайней мере, прояснил ее. У меня была тестовая страница, которая ссылалась на онлайн (то есть, code.jquery.com / ... ) копию jquery-ui.css, и в этом случае появился «X». Однако на моей реальной странице проекта, в которой файл .css находился в локальной папке css, «X» не показывался. Копирование папки «images» в мою локальную папку css, наряду с моим файлом .css, устранило проблему.
Дейв Марли,
5

Я застрял с той же проблемой, и, прочитав и попробовав все приведенные выше предложения, я просто попытался вручную заменить это изображение (которое вы можете найти здесь ) в CSS после его загрузки и сохранения в папке с изображениями в моем приложении и вуаля, задача решена!

вот CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}
Рауль Риверо
источник
3

Я использую jQuery UI 1.8.17, и у меня была та же проблема, плюс у меня были дополнительные таблицы стилей CSS, применяемые к вещам на странице, включая цвет заголовка. Поэтому, чтобы избежать каких-либо других проблем, я выбрал точные элементы пользовательского интерфейса, используя код ниже:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Затем я добавил кнопку закрытия в свойствах самого диалога: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

По какой-то причине я был нацелен на оба предмета, но это работает!

Джеймс Дринкард
источник
3

Я знаю, что этот вопрос старый, но я только что столкнулся с jquery-ui v1.12.0.

Краткий ответ Убедитесь, что папка называется Imagesтам же, где и у вас jquery-ui.min.css. Папка images должна содержать изображения, найденные при новой загрузке jquery-ui

Длинный ответ

Моя проблема в том, что я использую gulp, чтобы объединить все мои CSS-файлы в один файл. Когда я это делаю, я меняю местоположение jquery-ui.min.css. Код CSS для этого диалогового окна ожидает, что папка называется Imagesв том же каталоге, а внутри этой папки ожидаются значки по умолчанию. поскольку gulp не копировал изображения в новое место назначения, на нем не было значка x.

юниор
источник
1

В качестве ссылки, вот как я расширил метод open согласно предложению @ john-macintyre:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

deansimcox
источник
1
  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Shashidhar
источник
1

Если вы вызываете dialog () внутри функции js, вы можете использовать приведенные ниже коды конфликтов кнопки начальной загрузки

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>
гири-WebDev
источник
1

Один мудрец однажды помог мне.

В папке, где jquery-ui.cssнаходится, создайте папку с именем «images» и скопируйте в нее следующие файлы:

щ-icons_444444_256x240.png

щ-icons_555555_256x240.png

щ-icons_777620_256x240.png

щ-icons_777777_256x240.png

щ-icons_cc0000_256x240.png

щ-icons_ffffff_256x240.png

и появится значок закрытия.

Борис Пращурович
источник
0

Просто добавьте в недостающее:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
Обильный Ли
источник
3
Я не могу Я не создаю эту часть HTML, JQuery делает. Я добавил больше информации в свой вопрос, чтобы прояснить этот момент.
Сион Темный,
0

У меня тоже есть эта проблема. Вот код, который вставляется для кнопки закрытия:

От веб-разработчика, показывающего код, созданный jquery

Когда я выключаю стиль = "display: none:" на кнопке, появляется кнопка закрытия. По какой-то причине это отображается: нет; готовится, и я не вижу, как это контролировать. Поэтому другим способом решения этой проблемы может быть просто переопределение отображения: нет. Не вижу, как это сделать, хотя.

Я отмечаю, что ответ, опубликованный KyleMit, работает, но делает кнопку X другого вида.

Я также отмечаю, что эта проблема затрагивает не все диалоги на моих страницах, а только некоторые из них. Некоторые диалоги работают как положено; другие не имеют заголовка (т. е. диапазон, содержащий заголовок, пуст), пока присутствует кнопка закрытия.

Я думаю, что-то серьезно не так, и это может быть не время для 1.10.x.

Но после дальнейшей работы я обнаружил, что в некоторых случаях заголовки не были установлены должным образом, и после исправления этого, кнопка закрытия X появилась снова, как и должно быть.

Я использовал для установки заголовков, как это:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

Этот идентификатор не существует в моем коде, но создается, очевидно, с помощью jquery из ac-popup и ui-dialog-title. Вид клуджа. Но, как я уже сказал, это больше не работает, и я должен использовать следующее:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

После этого проблема с отсутствующими кнопками выглядит лучше, хотя я не уверен, что они определенно связаны.

Джеффри Саймон
источник
0

Даже загрузив загрузчик после jquery-ui, я смог исправить это:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}
idiglove
источник