it-swarm.com.ru

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

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

Я создаю диалоговое окно и получаю пустой серый квадрат, где значок закрытия должен быть: Screen shot of missing close icon

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

<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 Demo page :

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

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

168
Xion Dark

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

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

400
David G

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

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

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

Похоже, это ошибка в способе доставки 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>");
    }
});
20
KyleMit

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

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

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

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

15
Robert

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

  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;
    }
    
13
Yauheni Charniauski

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

8
Juan Hernández

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

вот CSS:

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

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

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

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

2
James Drinkard

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

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

}

1
Shashidhar

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

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

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

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

1
Mike A

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

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

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

0
Boris Prashchurovich

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

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

From Web Developer showing the jquery-created code

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

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

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