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

188

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: Zrzut ekranu przedstawiający brakującą ikonę zamknięcia

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

Xion Dark
źródło
1
Czy sprawdziłeś, czy plik obrazu ikony istnieje w twoim systemie plików?
Tiquelou
Tak, arkusz obrazu ikony istnieje i znajduje się we właściwej lokalizacji.
Xion Dark,

Odpowiedzi:

443

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.

David G.
źródło
7
To naprawiło mój problem. Zasoby zostały uwzględnione w tej kolejności: 1) JQuery core 2) bootstrap 3) JQueryUI. Dzięki za pomoc; lepiej późno niż wcale! PS - zrujnowałeś mi umysł.
Xion Dark,
6
Nawet później ... Czy możesz wyjaśnić, DLACZEGO zamówienie bootstrap ma z tym coś wspólnego?
AndyC
4
Jeśli zamienisz zamówienie Bootstrap przed Jquery UI, wówczas podpowiedzi Bootstrap nie będą działać.
vee
4
Chociaż nie jest to dobre rozwiązanie, przegłosowałem je, ponieważ pozwala to szybko sprawdzić, czy to jest problem. Ja osobiście skorzystam z rozwiązania Raula Riverosa, ponieważ po prostu zamiana dwóch skryptów powoduje wiele innych, większych problemów. BTW, byłem trochę zdumiony, kiedy to zobaczyłem.
krowe
18
Jeśli nie chcesz zmieniać kolejności interfejsu Bootstrap i interfejsu użytkownika jQuery, możesz również naprawić przycisk: $.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517
l.poellabauer
45

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
Całkiem fajne
źródło
Jest to dość sprytny sposób robienia rzeczy bez zakłócania połączeń. +1 za to samo.
Aalok Mishra
przeszkadzać w lekcjach guzików
Stefano Mtangoo,
1
Problem z tym rozwiązaniem polega na tym, że spowoduje to uszkodzenie kodu w miejscu, w którym chcesz użyć funkcji przycisku ładowania początkowego, takiego jak przycisk („ładowanie”). Aby upewnić się, że istniejąca funkcjonalność przycisku bootstrap nadal działa, zamień wszystkie odwołania do wywołań funkcji bootstrap „button ()” na „bootstrapBtn ()”. (Tak, wiem, że komentarze do kodu implikują to, ale pomyślałem, że warto to wyraźnie powiedzieć.)
Kornél Regius
Czy twój redaktor nie narzeka na brakujące średniki?
R. Schreurs,
22

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>");
    }
});
KyleMit
źródło
8
Informacje dla przyszłych czytelników możesz rozszerzyć ui.dialog (link) , abyś nie musiał duplikować tej otwartej funkcjonalności przy każdym połączeniu.
John MacIntyre
2
To działało dość dobrze. X był nieco dalej niż normalnie ... nie jestem pewien, dlaczego.
ashlar64
Świetne rozwiązanie! Jednak w moim przypadku removeClass (...) był niepotrzebny i powodował niewłaściwie umieszczony przycisk X po lewej stronie okna dialogowego. Po prostu połączenie metody html () z metodą find () wykonało zadanie. Dziękuję Ci.
Aamir
16

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.

Robert
źródło
Używam 1.10.3, ale przynajmniej teraz czuję się mniej szalony. Na razie postanowiłem to zignorować. Dzięki.
Xion Dark,
Mogę potwierdzić, że nadal występuje problem w wersji 1.10.3
Frug
Nadal to samo w 1.10.4
Dbloch,
Ten sam problem w 1.12.1
TetraDev
15

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;
    }
Yauheni Charniauski
źródło
Doskonały! Jeśli nie masz zainstalowanego pliku obrazu lub żadnego konkretnego motywu, możesz go pobrać tutaj: jqueryui.com/themeroller . Pobierz motyw i wybierz potrzebne komponenty (w tym przypadku okno dialogowe). Następnie pobierz, rozpakuj, otwórz folder motywu lub obrazu i skopiuj plik obrazu zgodny z motywem do swojego projektu. Następnie zmień odniesienie w css podanym przez Yauheniego w jego odpowiedzi.
Exel Gamboa,
Twój punkt 3 rozwiązał dla mnie problem. Muszę tylko dokonać drobnej regulacji szerokości, wysokości i położenia tła, aby przycisk wyglądał tak, jak chciałem. Dziękuję Ci.
Vimalan Jaya Ganesh
9

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

Juan Hernández
źródło
3
W rzeczywistości jest to odpowiedź, która rozwiązała dla mnie problem, a przynajmniej go wyjaśniła. Miałem stronę testową, która odwoływała się do kopii online (tj. Code.jquery.com / ... ) kopii pliku jquery-ui.css iw tym przypadku pojawiło się „X”. Jednak na mojej rzeczywistej stronie projektu, która miała plik .css w lokalnym folderze css, „X” nie był wyświetlany. Skopiowanie folderu „images” do mojego lokalnego folderu css, obok mojego pliku .css, rozwiązało problem.
Dave Marley,
5

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");
}
Raul Rivero
źródło
3

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!

James Drinkard
źródło
3

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.

Junior
źródło
1

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

deansimcox
źródło
1
  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Shashidhar
źródło
1

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>
giri-webdev
źródło
1

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.

Boris Prashchurovich
źródło
0

Po prostu dodaj brakujące:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
Obfity Lee
źródło
3
Nie mogę Jquery nie tworzy tej części HTML. Dodałem więcej informacji do mojego pytania, aby wyjaśnić tę kwestię.
Xion Dark
0

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

Od programisty wyświetlającego kod utworzony przez jquery

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.

Jeffrey Simon
źródło
0

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;
}
idiglove
źródło