Діалог інтерфейсу jQuery - відсутній значок закриття

Я використовую власну тему 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);
        }
    }
});

Я в збитку і мені потрібна допомога. Заздалегідь спасибі.

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

Причина цього відбувається в тому, що ви викликаєте завантажувальну програму після того, як ви викликаєте 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 без підказки, оскільки він мені не потрібен, оскільки завантажувач. Тож це питання мені ніколи не підходило.

Редагувати - 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/ a / 23428433/4660870 )

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

Це, мабуть, є помилкою у шляху доставки jQuery. Ви можете виправити це вручну за допомогою деякої маніпуляції з 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 кнопка закриття діалогу відсутня. Існує лише тег кнопок, піктограма інтерфейсу - це пропуск.

Я завантажив попередню версію, і X для кнопки закриття показує резервну копію.

Я знайшов три виправлення:

1. Ви можете просто завантажити завантажувальний спочатку спочатку. І вони завантажують 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;
   }

У мене була така ж точна проблема. Можливо, ви вже перевірили це, але вирішили це, просто помістивши папку "зображення" в те саме місце, що і 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 до речей на сторінці, включаючи колір заголовка. Щоб уникнути будь-яких інших проблем, я орієнтувався на точні елементи інтерфейсу, використовуючи наведений нижче код:

$("#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.

В якості довідки, я розширив відкритий метод відповідно до пропозиції @ 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;

}

Якщо ви викликаєте діалогове вікно () всередині функції 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" та скопіюйте в неї файли нижче:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

і з'явиться піктограма закриття.

Просто додайте відсутні дані:

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

У мене теж є це питання. Ось код, який вставляється для кнопки закриття:

Коли я вимикаю на кнопці style = "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;
}