Okno dialogowe interfejsu użytkownika jQuery - brak ikony zamknięcia

Używam niestandardowego motywu jQuery 1.10.3. Pobrałem wszystkie prosto z rolki tematycznej i celowo niczego nie zmieniłem.

Tworzę okno dialogowe i otrzymuję pusty szary kwadrat, w którym powinna znajdować się ikona zamykania:

Porównałem kod generowany na mojej stronie:

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

do kodu wygenerowanego na stronie Demo okna dialogowego :

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

EDYCJA: Różne części kodu są generowane przez jQueryUI, a nie ja, więc nie mogę po prostu dodać znaczników span bez edycji pliku jqueryui js, który wydaje się złym / niepotrzebnym wyborem do osiągnięcia normalnej funkcjonalności.

Oto użyty skrypt javascript, który generuje tę część kodu:

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

Jestem zagubiony i potrzebuję pomocy. Z góry dziękuję.

Jakiś czas się spóźniam, ale zaraz rozwalę ci umysł, gotowy?

Dzieje się tak dlatego, że wywołujesz bootstrap po wywołaniu jquery-ui w.

Dosłownie zamień dwa, aby zamiast:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

staje się

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Edycja - 26/06/2015 - to przyciąga zainteresowanie miesiące później, więc pomyślałem, że warto edytować. Naprawdę podoba mi się rozwiązanie noConflict oferowane w komentarzu pod tą odpowiedzią i wyjaśnione przez użytkownika Pretty Cool jako osobna odpowiedź. Jak niektórzy zgłaszali problemy z etykietą bootstrap, gdy skrypty są zamieniane. Nie spotkałem się jednak z tym problemem, ponieważ pobrałem interfejs jquery bez podpowiedzi, ponieważ nie potrzebowałem go, ponieważ bootstrap. Więc ten problem nigdy nie pojawił się dla mnie.

Edytuj - 22/07/2015 - Nie mylić jquery-uiz jquery! Podczas gdy JavaScript Bootstrap wymaga wcześniejszego załadowania jQuery, nie opiera się on na jQuery-UI. Więc jquery-ui.jsmoże być załadowany po bootstrap.min.js, a jquery.jszawsze musi być załadowany przed startowej.

To jest komentarz do najważniejszej odpowiedzi, ale czułem, że była warta swojej własnej odpowiedzi, ponieważ pomogła mi rozwiązać problem.

Jeśli chcesz zadeklarować Bootstrap po interfejsie JQuery (zrobiłem to, ponieważ chciałem użyć podpowiedzi Bootstrap), zadeklarowanie następującego (zadeklarowałem to później $(document).ready) pozwoli na ponowne wyświetlenie przycisku (odpowiedź z 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

To wydaje się być błędem w sposobie wysyłania jQuery. Możesz to naprawić ręcznie, manipulując domem na Dialog Openzdarzeniu:

$("#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>");
    }
});

Jest to zgłaszane jako złamane w 1.10

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

phillip 29 stycznia 2013 o 07:36 powiedział: W wersjach CDN brakuje przycisku zamykania okna dialogowego. Jest tylko znacznik przycisku, ikona interfejsu użytkownika zakresu jest missong.

Pobrałem poprzednią wersję, a przycisk X przycisku zamknięcia pokazuje się ponownie.

Znalazłem trzy poprawki:

1. Najpierw możesz załadować bootrap. I ładują jquery-ui. Ale to nie jest dobry pomysł. Ponieważ zobaczysz błędy w konsoli.

2. To:

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;

   pomaga Ale inne przyciski wyglądają okropnie. A teraz nie mamy przycisków ładowania początkowego.

3. Chcę tylko używać stylów bootrap, a także chcę mieć przycisk zamykający z ikoną. Zrobiłem następujące:

   Jak blisko wygląda przycisk po naprawie

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

Miałem ten sam dokładny problem. Być może już to sprawdziłeś, ale rozwiązałeś problem, umieszczając folder „images” w tej samej lokalizacji, co plik jquery-ui.css

Utknąłem z tym samym problemem i po przeczytaniu i wypróbowaniu wszystkich powyższych sugestii po prostu próbowałem ręcznie zastąpić ten obraz (który można znaleźć tutaj ) w CSS po pobraniu go i zapisaniu w folderze obrazów w mojej aplikacji i voilá, problem rozwiązany!

oto CSS:

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

Korzystam z jQuery UI 1.8.17 i miałem ten sam problem, a także miałem dodatkowe arkusze stylów css stosowane do rzeczy na stronie, w tym kolor paska tytułowego. Aby uniknąć innych problemów, wybrałem dokładnie elementy interfejsu użytkownika za pomocą poniższego kodu:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Następnie dodałem przycisk zamknięcia we właściwościach samego okna dialogowego: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

Z jakiegoś powodu musiałem celować w oba przedmioty, ale to działa!

Wiem, że to pytanie jest stare, ale właśnie miałem ten problem z jquery-ui v1.12.0.

Krótka odpowiedź Upewnij się, że masz folder o nazwie Imagesw tym samym miejscu, co ty jquery-ui.min.css. Folder obrazów musi zawierać obrazy znalezione przy nowym pobraniu jquery-ui

Długa odpowiedź

Mój problem polega na tym, że używam gulp do scalenia wszystkich moich plików css w jeden plik. Kiedy to robię, zmieniam lokalizację jquery-ui.min.css. Kod css okna dialogowego oczekuje folderu o nazwieImages w tym samym katalogu, a wewnątrz tego folderu oczekuje domyślnych ikon. ponieważ łyk nie kopiował obrazów do nowego miejsca docelowego, nie wyświetlał ikony x.

Jako odniesienie w ten sposób rozszerzyłem metodę otwartą zgodnie z sugestią @ 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;

}

Jeśli wywołujesz okno dialogowe () w funkcji js, możesz użyć poniższych kodów konfliktu przycisków bootstrap

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

Mądry człowiek mi kiedyś pomógł.

W folderze, w którym się jquery-ui.cssznajduje, utwórz folder o nazwie „obrazy” i skopiuj do niego poniższe pliki:

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

i pojawi się ikona zamykania.

Po prostu dodaj brakujące:

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

Mam również ten problem. Oto kod wstawiany do przycisku zamykania:

Kiedy wyłączę styl = "display: none:" na przycisku, pojawi się przycisk zamknięcia. Więc z jakiegoś powodu, które się wyświetlają: brak; przygotowuje się i nie wiem, jak to kontrolować. Innym sposobem rozwiązania tego problemu może być po prostu przesłonięcie wyświetlacza: brak. Nie wiem jednak, jak to zrobić.

Zauważam, że odpowiedź wysłana przez KyleMita działa, ale sprawia, że ​​przycisk X wygląda inaczej.

Zauważam również, że ten problem nie dotyczy wszystkich okien dialogowych na moich stronach, ale tylko niektóre z nich. Niektóre okna dialogowe działają zgodnie z oczekiwaniami; inne nie mają tytułu (tzn. rozpiętość zawierająca tytuł jest pusta), gdy przycisk zamykania jest obecny.

Myślę, że coś jest naprawdę nie tak i może nie być to czas na wersję 1.10.x.

Ale po dalszych pracach odkryłem, że w niektórych przypadkach tytuły nie były ustawione poprawnie, a po naprawieniu przycisk zamknięcia X pojawił się ponownie tak, jak powinien.

Ustawiałem takie tytuły:

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

Ten identyfikator nie istnieje w moim kodzie, ale najwyraźniej jest tworzony przez jquery z ac-popup i ui-dialog-title. Coś w rodzaju kludge. Ale jak powiedziałem, że to już nie działa i muszę zamiast tego użyć następujących:

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

Po wykonaniu tej czynności problem braku przycisku wydaje się lepszy, chociaż nie jestem pewien, czy są one ze sobą powiązane.

Nawet ładując bootstrap po jquery-ui, udało mi się to naprawić za pomocą:

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