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

Я использую собственную тему 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);
        }
    }
});

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

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

Причина, по которой это происходит, в том, что вы вызываете загрузчик, после того, как вы вызываете 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.

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

Если вы хотите, чтобы 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

Похоже, это ошибка в способе доставки 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/

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

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

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

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

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

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

вот CSS:

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

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

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

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

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

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

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

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

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

}

Если вы вызываете 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>

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

В папке, где 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

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

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

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

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

Когда я выключаю стиль = "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);

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

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

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}