Czy możemy sprawić, by popovers były usuwalne w taki sam sposób jak modały, tj. zamknąć je, gdy użytkownik kliknie gdzieś poza nimi?
Niestety nie mogę po prostu użyć prawdziwego modalu zamiast popovera, ponieważ modal oznacza position: fixed i nie byłoby już popovera. :(
twitter-bootstrap
popover
Ante Vrli
źródło
źródło
data-trigger="hover"
idata-trigger="focus"
są wbudowaną alternatywą do zamykania okna popover, jeśli nie chcesz używać przełącznika. Moim zdaniemdata-trigger="hover"
zapewnia najlepsze wrażenia użytkownika ... nie ma potrzeby pisania dodatkowego kodu .js ...Odpowiedzi:
Aktualizacja: nieco bardziej niezawodne rozwiązanie: http://jsfiddle.net/mattdlockyer/C5GBU/72/
W przypadku przycisków zawierających tylko tekst:
W przypadku przycisków zawierających ikony (ten kod zawiera błąd w programie Bootstrap 3.3.6, zobacz poprawkę poniżej w tej odpowiedzi)
Dla JS Generowane Popovers Użyj
'[data-original-title]'
zamiast'[data-toggle="popover"]'
Zastrzeżenie: powyższe rozwiązanie umożliwia otwieranie wielu popoverów jednocześnie.
Jeden popover na raz:
Aktualizacja: Bootstrap 3.0.x, zobacz kod lub skrzypce http://jsfiddle.net/mattdlockyer/C5GBU/2/
To obsługuje zamykanie okien pop-up, które są już otwarte i nie kliknięte lub ich łącza nie zostały kliknięte.
Aktualizacja: Bootstrap 3.3.6, patrz skrzypce
Naprawiono problem polegający na tym, że po zamknięciu potrzeba 2 kliknięć, aby ponownie otworzyć
Aktualizacja: Wykorzystując warunek poprzedniego ulepszenia, to rozwiązanie zostało osiągnięte. Napraw problem podwójnego kliknięcia i wyskakującego widma:
źródło
$(document)
zamiast,$('body')
ponieważ czasamibody
nie rozciąga się na całą stronę.'[data-toggle="popover"]'
, który nie działa z popoverami generowanymi w JavaScript, użyłem'[data-original-title]'
jako selektora.Spowoduje to zamknięcie wszystkich okien wyskakujących, jeśli klikniesz w dowolnym miejscu oprócz okna wyskakującego
AKTUALIZACJA Bootstrap 4.1
źródło
Najprostsza, najbardziej odporna na awarie wersja , działa z każdą wersją bootstrap.
Demo: http://jsfiddle.net/guya/24mmM/
Demo 2: Nie odrzuca się po kliknięciu wewnątrz zawartości popover http://jsfiddle.net/guya/fjZja/
Demo 3: Wiele popovers: http://jsfiddle.net/guya/6YCjW/
Samo wywołanie tej linii spowoduje odrzucenie wszystkich popoverów:
Odrzuć wszystkie okna wyskakujące po kliknięciu na zewnątrz za pomocą tego kodu:
Fragment powyżej dołącza zdarzenie kliknięcia do treści. Gdy użytkownik kliknie popovera, będzie on zachowywał się normalnie. Kiedy użytkownik kliknie na coś, co nie jest popover, zamknie wszystkie popovers.
Będzie również działał z popoverami, które są inicjowane przez Javascript, w przeciwieństwie do niektórych innych przykładów, które nie będą działać. (patrz demo)
Jeśli nie chcesz odrzucić, klikając wewnątrz zawartości popover, użyj tego kodu (patrz link do 2. wersji demo):
źródło
!$(e.target).closest('.popover.in').length
byłby bardziej wydajny niż!$(e.target).parents().is('.popover.in')
.W bootstrap 2.3.2 możesz ustawić wyzwalacz na „focus” i to po prostu działa:
źródło
Zasadniczo nie jest to zbyt skomplikowane, ale należy wykonać pewne czynności kontrolne, aby uniknąć usterki.
Demo (jsfiddle)
źródło
popover()
kliknięcia zamiast najechania kursorem?stopPropagation()
zdarzenie przekazane do modułu obsługi kliknięć (jeśli nie, ukryty moduł obsługi natychmiast ukrywa popover). Demo (jsfiddle)Żadne z rzekomo wysoko głosowanych rozwiązań nie działało dla mnie poprawnie. Każda z nich powoduje błąd, gdy po otwarciu i zamknięciu (klikając inne elementy) popover po raz pierwszy nie otwiera się ponownie, dopóki nie utworzysz dwóch klikniesz linku wyzwalającego zamiast jednego.
Więc nieznacznie go zmodyfikowałem:
źródło
Zrobiłem jsfiddle, aby pokazać ci, jak to zrobić:
http://jsfiddle.net/3yHTH/
Chodzi o to, aby pokazać popover po kliknięciu przycisku i ukryć popover po kliknięciu poza przyciskiem.
HTML
JS
źródło
jsfiddle bootstrap
i dał mi szkielet bootstrap css + js w jsfiddle.po prostu dodaj ten atrybut do elementu
źródło
Ten został poproszony przed tutaj . Ta sama odpowiedź, którą podałem, nadal obowiązuje:
Miałem podobną potrzebę i znalazłem to świetne małe rozszerzenie Twitter Bootstrap Popover autorstwa Lee Carmichaela, o nazwie BootstrapX - kliknięcie . Ma też kilka przykładów wykorzystania tutaj . Zasadniczo zmieni popover w interaktywny komponent, który zamknie się po kliknięciu w inne miejsce strony lub na przycisku zamykania w popover. Umożliwi to również otwieranie wielu okien pop-up jednocześnie i wiele innych ciekawych funkcji.
źródło
Na przyjęcie jest już późno ... ale pomyślałem, że się z tym podzielę. Uwielbiam popover, ale ma tak mało wbudowanej funkcjonalności. Napisałem rozszerzenie bootstrap .bubble (), czyli wszystko, co chciałbym, żeby był popover. Cztery sposoby na zwolnienie. Kliknij na zewnątrz, przełącz na link, kliknij X i naciśnij Escape.
Ustawia się automatycznie, więc nigdy nie znika ze strony.
https://github.com/Itumac/bootstrap-bubble
To nie jest nieodpłatna autopromocja ... Wiele razy w życiu chwytałem kod innych ludzi, chciałem zaoferować własne wysiłki. Daj mu wir i sprawdź, czy to działa dla Ciebie.
źródło
Według http://getbootstrap.com/javascript/#popovers ,
Użyj wyzwalacza aktywności, aby odrzucić wyskakujące okienka przy następnym kliknięciu, które wykona użytkownik.
źródło
<a>
znacznika, a nie<button>
etykiety, a także musi zawieraćrole="button"
itabindex
atrybuty ”. Czy próbowałeś tego z tymi specyfikacjami?Zmodyfikowane zaakceptowane rozwiązanie. To, czego doświadczyłem, to fakt, że po ukryciu niektórych programów typu popover trzeba je dwukrotnie kliknąć, aby wyświetlić się ponownie. Oto, co zrobiłem, aby upewnić się, że popover („hide”) nie jest wywoływany w już ukrytych popoverach.
źródło
Wystarczy dodać ten atrybut do elementu HTML, aby zamknąć popover w następnym kliknięciu.
referencja z https://getbootstrap.com/docs/3.3/javascript/#popovers
źródło
To rozwiązanie działa dobrze:
źródło
źródło
Możesz także użyć opcji bubbingu zdarzeń, aby usunąć wyskakujące okienko z DOM. Jest trochę brudny, ale działa dobrze.
W swoim html dodaj klasę .popover-close do treści w oknie popover, które powinno je zamknąć.
źródło
Wygląda na to, że metoda „ukryj” nie działa, jeśli utworzysz popover z delegacją selektora, zamiast tego należy użyć opcji „zniszczyć”.
Sprawiłem, że działa tak:
JSfiddle tutaj
źródło
Dowiedzieliśmy się, że mamy problem z rozwiązaniem @mattdlockyer (dzięki za rozwiązanie!). Podczas korzystania z właściwości selektora dla konstruktora popover w ten sposób ...
... proponowane rozwiązanie dla BS3 nie będzie działać. Zamiast tego tworzy drugą instancję popover lokalną dla niego
$(this)
. Oto nasze rozwiązanie, aby temu zapobiec:Jak wspomniano
$(this).popover('hide');
, utworzy drugą instancję z powodu delegowanego odbiornika. Podane rozwiązanie ukrywa tylko pop-upy, które są już zaimplementowane.Mam nadzieję, że zaoszczędzę wam trochę czasu.
źródło
Bootstrap natywnie obsługuje to :
JS Bin Demo
źródło
to rozwiązanie pozwala pozbyć się przykrych, drugich kliknięć podczas wyświetlania popovera po raz drugi
testowane z Bootstrap v3.3.7
źródło
Próbowałem wielu wcześniejszych odpowiedzi, naprawdę nic dla mnie nie działa, ale to rozwiązanie:
https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click
Dawny:
źródło
Wymyśliłem to: mój scenariusz zawierał więcej popoverów na tej samej stronie, a ukrywanie ich po prostu czyniło ich niewidocznymi, dlatego klikanie elementów za popoverem nie było możliwe. Chodzi o to, aby oznaczyć konkretny link popover jako „aktywny”, a następnie możesz po prostu „przełączyć” aktywny popover. Spowoduje to całkowite zamknięcie okna popover $ ('. Popover-link'). Popover ({html: true, container: 'body'})
źródło
Po prostu usuwam inne aktywne programy popover przed wyświetleniem nowego programu popover (bootstrap 3):
źródło
testowane z 3.3.6 i drugie kliknięcie jest w porządku
źródło
demo: http://jsfiddle.net/nessajtr/yxpM5/1/
}
to jest moje rozwiązanie.
źródło
Takie podejście zapewnia zamknięcie okna popover przez kliknięcie w dowolnym miejscu na stronie. Kliknięcie innego elementu, który można kliknąć, powoduje ukrycie wszystkich innych okien podręcznych. Animacja: fałsz jest wymagana, w przeciwnym razie otrzymasz komunikat jquery .remove w konsoli.
źródło
Ok, to moja pierwsza próba odpowiedzi na pytanie o przepełnienie stosu, więc tutaj nic nie idzie: P
Wygląda na to, że nie jest całkiem jasne, czy ta funkcja faktycznie działa od razu na najnowszym bootstrapie (cóż, jeśli chcesz pójść na kompromis, gdzie użytkownik może kliknąć. Nie jestem pewien, czy musisz kliknąć „kliknij” najedź myszą per se, ale na iPadzie kliknięcie działa jak przełącznik.
Rezultatem końcowym jest najechanie myszką lub kliknięcie na pulpicie (większość użytkowników najedzie kursorem). Dotknięcie elementu na urządzeniu dotykowym spowoduje jego podniesienie, a ponowne dotknięcie go zdejmie. Oczywiście jest to niewielki kompromis w stosunku do twojego pierwotnego wymagania, ale przynajmniej twój kod jest teraz czystszy :)
źródło
Biorąc kod Matta Lockyera, wykonałem prosty reset, aby dom nie był objęty elementem ukrywania.
Kod Matt: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/
Fiddle: http://jsfiddle.net/mrsmith/Wd2qS/
źródło
Spróbuj tego, ukryje się, klikając na zewnątrz.
źródło
Miałem problemy z rozwiązaniem mattdlockyer, ponieważ dynamicznie konfigurowałem linki popover przy użyciu kodu w następujący sposób:
Musiałem to tak zmodyfikować. Naprawiono dla mnie wiele problemów:
Pamiętaj, że zniszczenie pozbywa się elementu, więc część selektora jest ważna przy inicjowaniu popoverów.
źródło