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

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

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

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

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

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

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

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

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

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

• Вы можете сначала загрузить загрузку. И они загружают 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;
  }
  

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

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

вот CSS:

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

Я использую 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")}}],
...

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

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

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

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

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

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

В папке ...\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

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

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

}

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

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

Когда я выключаю кнопку 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);

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

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

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