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ę.
javascript
jquery-ui
jquery-ui-dialog
imagebutton
Xion Dark
źródło
źródło
Odpowiedzi:
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:
staje się
:)
źródło
$.fn.bootstrapBtn = $.fn.button.noConflict();
stackoverflow.com/a/23428433/402517To 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 )źródło
To wydaje się być błędem w sposobie wysyłania jQuery. Możesz to naprawić ręcznie, manipulując domem na
Dialog Open
zdarzeniu:źródło
Jest to zgłaszane jako złamane w 1.10
http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/
Pobrałem poprzednią wersję, a przycisk X przycisku zamknięcia pokazuje się ponownie.
źródło
Znalazłem trzy poprawki:
To:
pomaga Ale inne przyciski wyglądają okropnie. A teraz nie mamy przycisków ładowania początkowego.
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
źródło
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
źródło
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:
źródło
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:
Następnie dodałem przycisk zamknięcia we właściwościach samego okna dialogowego: ...
Z jakiegoś powodu musiałem celować w oba przedmioty, ale to działa!
źródło
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
Images
w tym samym miejscu, co tyjquery-ui.min.css
. Folder obrazów musi zawierać obrazy znalezione przy nowym pobraniu jquery-uiDł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.źródło
Jako odniesienie w ten sposób rozszerzyłem metodę otwartą zgodnie z sugestią @ john-macintyre:
źródło
}
źródło
Jeśli wywołujesz okno dialogowe () w funkcji js, możesz użyć poniższych kodów konfliktu przycisków bootstrap
źródło
Mądry człowiek mi kiedyś pomógł.
W folderze, w którym się
jquery-ui.css
znajduje, utwórz folder o nazwie „obrazy” i skopiuj do niego poniższe pliki:i pojawi się ikona zamykania.
źródło
Po prostu dodaj brakujące:
źródło
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:
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:
Po wykonaniu tej czynności problem braku przycisku wydaje się lepszy, chociaż nie jestem pewien, czy są one ze sobą powiązane.
źródło
Nawet ładując bootstrap po jquery-ui, udało mi się to naprawić za pomocą:
źródło