Tworzę okno modalne za pomocą Twitter Bootstrap. Domyślne zachowanie jest takie, że jeśli klikniesz poza obszarem modalnym, modal zostanie automatycznie zamknięty. Chciałbym to wyłączyć - tzn. Nie zamykać okna modalnego, gdy klikniesz poza modułem.
Czy ktoś może współdzielić kod jQuery, aby to zrobić?
jquery
twitter-bootstrap
modal-dialog
mouseclick-event
użytkownik1296175
źródło
źródło
Odpowiedzi:
Myślę, że chcesz ustawić wartość tła na statyczną . Jeśli chcesz uniknąć zamykania okna podczas używania Escklucza, musisz ustawić inną wartość.
Przykład:
LUB jeśli używasz JavaScript:
źródło
Po prostu ustaw
backdrop
właściwość na'static'
.Możesz również ustawić
keyboard
właściwość na,false
ponieważ zapobiega to zamknięciu modalu przez naciśnięcie Escklawisza na klawiaturze.myModal
jest identyfikatorem div, który zawiera twoją zawartość modalną.źródło
backdrop
ikeyboard
są wymienione tutaj w dokumentacji w sekcji Opcje .Możesz również uwzględnić te atrybuty w samej definicji modalnej:
źródło
Jeśli już zainicjowałeś okno modalne, możesz zresetować opcje za pomocą,
$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})
aby upewnić się, że zastosuje nowe opcje.źródło
Zastąp zdarzenie „ukryj” Bootstrap w oknie dialogowym i zatrzymaj jego domyślne zachowanie (aby usunąć okno dialogowe).
Zobacz poniższy fragment kodu:
W naszym przypadku działa dobrze.
źródło
Tak, możesz to zrobić w następujący sposób:
źródło
Niby odpowiedź @ AymKdn, ale pozwoli ci to zmienić opcje bez ponownej inicjalizacji modalu.
Lub jeśli potrzebujesz wielu opcji, JavaScript
with
jest tu przydatny!Jeśli modal jest już otwarty, opcje te zostaną zastosowane dopiero przy następnym otwarciu modalu.
źródło
Po prostu dodaj te dwie rzeczy
Teraz będzie to wyglądać tak
Spowoduje to wyłączenie przycisku Escape, a także kliknięcie w dowolnym miejscu i ukrycie się.
źródło
Możesz wyłączyć zachowanie „kliknij, aby zamknąć” w tle i ustawić to jako domyślne dla wszystkich swoich modałów, dodając ten skrypt JavaScript do swojej strony (upewnij się, że jest on wykonywany po załadowaniu jQuery i Bootstrap JS):
źródło
Jak mówi D3VELOPER, następujący kod rozwiązuje to:
Używam zarówno jquery, jak i bootstrap i po prostu
removeData('modal')
nie działają.źródło
Najlepsze, co znalazłem, to dodanie tego kodu do linku
źródło
Na wypadek, gdyby ktoś przyszedł tutaj z Google, próbując dowiedzieć się, jak uniemożliwić komuś zamknięcie modalu, nie zapomnij, że w prawym górnym rogu modalu znajduje się również przycisk zamykania, który należy usunąć.
Użyłem CSS, aby go ukryć:
Zauważ, że używając „display: none;” zostanie nadpisany podczas tworzenia modalu, więc nie używaj tego.
źródło
Jeśli chcesz warunkowo wyłączyć tę
backdrop click closing
funkcję. Możesz użyć następującego wiersza, aby ustawićbackdrop
opcjęstatic
podczas działania.Bootstrap v3.xx
Bootstrap v2.xx
Zapobiegnie to zamknięciu już utworzonego modelu z
backdrop
opcją ustawioną nafalse
( zachowanie domyślne ).źródło
Możesz ustawić domyślne zachowanie modalnego wyskakującego okienka, używając poniższego wiersza kodu:
źródło
Robienie tego jest obecnie bardzo łatwe. Poprostu dodaj:
W twoim dzielniku modalnym.
źródło
To kolejne rozwiązanie, którego niektórzy z was mogliby szukać (tak jak ja ...)
Mój problem był podobny, okno modalne zamykało się podczas ładowania iframe, który miałem w środku, więc musiałem wyłączyć modalne odrzucanie, dopóki iframe nie zakończy ładowania, a następnie włączyć ponownie.
Przedstawione tutaj rozwiązania nie działały w 100%.
Moje rozwiązanie było następujące:
Tymczasowo uniemożliwiam zamknięcie Modalu za pomocą:
Ale z var is_loading, który umożliwi zamknięcie po załadowaniu iframe.
źródło
źródło
Aby zaktualizować stan tła w Bootstrap 4.1.3 po wyświetleniu modalu, użyliśmy następującego wiersza z wtyczki Bootstrap-Modal-Wrapper . Odwołanie do kodu repozytorium wtyczek .
źródło