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

Я использую пользовательскую тему 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>

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

<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>

EDIT: Различные части кода сгенерированы с помощью 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

Я опоздал на это, но я собираюсь взорвать свой ум, готов?

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

Буквально замените два так, чтобы вместо:

<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 без всплывающая подсказка, поскольку мне это не нужно, потому что бутстрап. Так что этот вопрос никогда подошел ко мне.

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

Ответ 2

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

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Ответ 3

Это, кажется, ошибка в способе доставки 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>");
    }
});

Ответ 4

Об этом сообщается как сломанном в 1.10

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

phillip 29 января 2013 года в 7:36 сказал: "В версиях CDN кнопка закрытия диалогового окна отсутствует. Theres только тег кнопки, диапазон ui-icon - missong.

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

Ответ 5

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

Вы можете сначала загрузить загрузку. И они загружают jquery-ui. Но это не очень хорошая идея. Потому что вы увидите ошибки в консоли.
Это:
```
var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;
```
помогает. Но другие кнопки выглядят ужасно. И теперь у нас нет кнопок начальной загрузки.

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

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

.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;
}

Ответ 6

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

Ответ 7

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

вот CSS:

.ui-state-default .ui-icon { background-image: url("../img/ui-icons_888888_256x240.png"); }

Ответ 8

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

$("#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")}}],
...

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

Ответ 9

В качестве справочника, таким образом, я расширил открытый метод в соответствии с предложением @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 open().
		return this._super();
	}
});

Ответ 10

  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Ответ 11

Помог мне мудрый человек.

В папке ...\css, где находится файл 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

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

Ответ 12

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

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

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

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

Ответ 13

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

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

Ответ 14

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

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

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

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

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

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

Я использовал такие заголовки, как это:

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

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

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

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