Pracuję na stronie internetowej za pomocą bootstrap.
Zasadniczo chciałem użyć modalu na stronie głównej, przywołanego przyciskiem w Jednostce Bohatera.
Kod przycisku:
<button type="button"
class="btn btn-warning btn-large"
data-toggle="modal"
data-target="#myModal">Open Modal</button>
Kod modalny:
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">In Costruzione</h3>
</div>
<div class="modal-body">
<p>Test Modal: Bootstrap</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
<button class="btn btn-warning">Salva</button>
</div>
</div>
Problem polega na tym, że jak tylko kliknę przycisk, modal zanika, a następnie natychmiast znika.
Byłbym wdzięczny za wszelką pomoc.
Ponadto, jak zmienić kolor trójkąta rozwijanego (skierowany w górę, bez aktywowania)? Pracuję na stronie internetowej opartej na pomarańczach i brązach, a ta niebieska rzecz jest naprawdę denerwująca.
twitter-bootstrap
modal-dialog
gorokizu
źródło
źródło
Odpowiedzi:
Prawdopodobna przyczyna
Jest to typowe zachowanie, gdy JavaScript dla wtyczki Modal zostanie załadowany dwukrotnie. Sprawdź, czy wtyczka nie jest podwójnie ładowana. W zależności od używanej platformy kod modalny może być ładowany z wielu źródeł. Niektóre z nich to:
require('bootstrap')
Wskazówki dotyczące debugowania
Dobrym miejscem do rozpoczęcia jest sprawdzenie
click
nasłuchiwania zarejestrowanych zdarzeń za pomocą narzędzi programistycznych w przeglądarce. Na przykład Chrome wyświetli plik źródłowy JS, w którym można znaleźć kod rejestrujący słuchacza. Inną opcją jest próba przeszukania źródeł na stronie w celu znalezienia frazy znajdującej się w kodzie modalnym, np.var Modal
.Niestety nie zawsze znajdą one coś we wszystkich przypadkach. Sprawdzanie żądań sieciowych może być nieco bardziej niezawodne, dając obraz wszystkiego ładowanego na stronę.
A (Broken) Demo
Oto demonstracja tego, co dzieje się, gdy ładujesz zarówno bootstrap.js, jak i bootstrap-modal.js (tylko w celu potwierdzenia twojego doświadczenia):
Plunker
Jeśli przewiniesz w dół do źródła na tej stronie, możesz usunąć lub skomentować
<script>
linię dla bootstrap-modal.js, a następnie sprawdzić, czy teraz modal będzie działał zgodnie z oczekiwaniami.źródło
Miałem ten sam problem, ale miał inną przyczynę. Postępowałem zgodnie z dokumentacją i utworzyłem taki przycisk:
Kiedy kliknąłem, wydawało się, że nic się nie stanie. Jednak przycisk znajdował się w polu,
<form>
który chwilowo pobierał tę samą stronę.Naprawiłem to, dodając
type="button"
element przycisku, aby nie przesuwał formularza po kliknięciu.źródło
Dla mnie zadziałało usunięcie
z przycisku. Sam przycisk może być dowolnym elementem - linkiem, divem, przyciskiem itp.
źródło
Po innych pomocnych odpowiedziach na to pytanie szukałem w mojej aplikacji mvc podwójnego odniesienia do bootstrapu.
W końcu go znalazłem - został zawarty w innej bibliotece, z której korzystałem, więc nie było to wcale oczywiste! (
datatables.net
).Jeśli nadal występuje ten problem, poszukaj innych bibliotek, które mogą zawierać dla Ciebie bootstrap. (
datatables.net
pozwala określić pobieranie z bootstrapem lub bez - inni robią to samo).Więc usunąłem
bootstrap.min.js
z mojegobundle.config
i wszystko działało dobrze.źródło
Ten sam objaw w kontekście aplikacji Rails z Bootstrap dostarczonym przez
bootstrap-sass
klejnot, a odpowiedź @ merv postawiła mnie na dobrej drodze.Mój
application.js
plik miał następujące elementy:Rozwiązaniem było usunięcie jednej z dwóch linii. Rzeczywiście, readme klejnotu ostrzega przed tym błędem. Mój błąd.
źródło
Mój kod w jakiś sposób zawierał plik bootstrap.min.js dwukrotnie. Usunąłem jeden z nich i wszystko działa teraz dobrze.
źródło
e.preventDefault();
z jquery uiDla mnie ten problem wystąpił w przypadku zastąpienia metody kliknięcia przycisku interfejsu użytkownika jquery, powodując domyślnie przeładowanie strony po kliknięciu.
źródło
Problem może również wystąpić, jeśli przy użyciu jquery dwukrotnie dołączasz detektor zdarzeń. Na przykład ustawiłbyś bez wiązania:
Jeśli tak się stanie, zdarzenie zostanie wystrzelone dwa razy z rzędu, a modal zniknie.
Zobacz przykład: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview
źródło
Natrafiłem na ten sam objaw, który @gpasse pokazał w jego przykładzie. Oto mój kod ...
Jak sugerował @Bhargav, mój problem wynikał z przycisku próby przesłania formularza i ponownego załadowania strony. Zmieniłem przycisk na
<a>
link w następujący sposób:... i rozwiązało problem.
UWAGA: Nie mam jeszcze wystarczającej reputacji, aby po prostu dodać komentarz lub opinię, i czułem, że mogę dodać trochę wyjaśnienia.
źródło
Ja również miałem ten sam problem, ale dla mnie tak się działo, ponieważ w formularzu modalnym miałem przycisk z napisem „prześlij”. Zmieniłam
do
I to naprawiło problem zniknięcia.
źródło
W moim przypadku miałem tylko jeden plik bootstrap.js, dołączony plik jquery.js, ale nadal pojawia się taki rodzaj błędu, a mój kod przycisku był mniej więcej taki:
Po prostu dodałem e.preventDefault (); i działało to jak urok.
Mój nowy kod był taki jak poniżej:
źródło
Dzisiaj sam spotkałem się z tym problemem i zdarzyło się tak tylko w Chrome. Uświadomiłem sobie, że może to być problem z renderowaniem. Przesunięcie określonego modalu do własnej warstwy renderującej rozwiązało go.
źródło
W moim przypadku kliknięcie przycisku powoduje (niepożądane) ponowne załadowanie strony.
Oto moja poprawka:
źródło
W moim przypadku używam
actionlink
przycisku w MVC i mam do czynienia z tym problemem, próbowałem wielu rozwiązań powyżej i innych, ale wciąż napotykam ten problem, a następnie zdaję sobie sprawę z mojego błędu w kodzie.Za pomocą wywołałem modal w javascript
Przed błędem używam tego przycisku
Nie mam wartości właściwości href w tym przycisku, więc mam problem.
Następnie edytuję ten kod przycisku w ten sposób
wtedy problem został rozwiązany tylko błąd z powodu braku # w pierwszym.
sprawdź, czy to ci pomoże.
źródło
Jeszcze jedna przyczyna / rozwiązanie! Miałem w kodzie JS:
Ale mój kod HTML został już napisany jako:
Jest to kolejna permutacja tego, jak duplikacja weszła do kodu i spowodowała otwarcie modala, a następnie zamknięcie. W moim przypadku
data-target
orazdata-toggle
w html zgodnie z dokumentacją Bootstrap dokumenty już uruchamiają modal do działania. Dlatego kod JS jest redundantny i po usunięciu działa.źródło
Miałem ten sam problem podczas pracy nad projektem z asp.NET. Korzystałem z bootstrap 3.1.0, rozwiązałem go z powrotem do bootstrap 2.3.2.
źródło
Ja też miałem problem, jeśli przycisk jest w środku tag, a następnie modal pojawia się raz i znika wkrótce, usunięcie przycisku z formularza naprawiło problem. Dzięki, skończyłem w tym wątku! +1 dla wszystkich.
źródło
Ten sam problem miałem podczas testów na urządzeniach mobilnych i ta sztuczka zadziałała dla mnie
Zmień przycisk, aby zakotwiczyć tag, który powinien działać, problem występuje z powodu przycisku typu, ponieważ próbuje on przesłać, więc modal znika natychmiast
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
.źródło
type="submit"
abytype="button"
rozwiązać ten problem.W moim przypadku CDN został zawarty w nagłówku application.html.erb, a także zainstalowałem klejnot „jquery-rails”, który, jak sądzę, dzięki powyższej dokumentacji i postom, jest zbędny.
Po prostu skomentowałem CDN (poniżej) od szefa application.html.erb i modal odpowiednio pozostaje otwarty.
źródło
Też miałem ten sam problem. Problem ze mną polegał na tym, że wyświetlałem modal po naciśnięciu linku i monitowaniu o potwierdzenie za pomocą jquery.
Poniższy kod wyświetlał modalność i który zniknął natychmiast:
Skończyło się na dodawaniu „#” do href, aby link nigdzie nie trafił i to rozwiązało mój problem.
źródło
Czy próbowałeś usunąć?
źródło
Wiem, że to stare, ale jest jeszcze jedna rzecz do sprawdzenia - upewnij się, że masz tylko jeden atrybut data-target =. Skopiowałem go i wynik był taki jak w tym wątku.
źródło
Dodałem
bootstrap
do mojego projektu za pośrednictwembower
, a następnie zaimportowałembootstrap.min.js
plik i po nimmodal.js
. (Przycisk otwierający modal znajduje się w formularzu). Po prostu usuwam import dlamodal.js
i to działa dla mnie.źródło
na wypadek, gdyby ktoś używał bootstrap Codeigniter 3 z możliwością datowania.
poniżej jest moja poprawka w config / ci_boostrap.php
źródło
Musiałem zmierzyć się z tym samym problemem. Powód jest taki sam jak
@merv
. Problem polegał na dodaniu do strony komponentu kalendarza. Sam komponent dodaje funkcję modalną do użycia w wyskakującym kalendarzu.Więc powodem złamania wyskakującego modelu będzie jeden lub więcej z poniższych
źródło
podczas pracy z Angularem (5) napotykam ten sam problem, ale w moim przypadku rozwiązałem to w następujący sposób:
component.html
component.ts
UWAGA: należy zaimportować jquery do pliku ts jako „deklaruj var $: any;”
Zmiany, które wprowadziłem:
usunąłem "data-toggle =" modal "ze znacznika Button (dzięki @miCRoSCoPiC_eaRthLinG ta odpowiedź pomaga mi tutaj) w moim przypadku pokazuje modal, więc utworzyłem (click) =" showresult () "
w pliku component.ts należy zadeklarować metodę Jquery ($) i metodę kliknięcia przycisku wewnątrz showresult () wywołać „$ ('# myModal'). modal ('show');”
źródło
Miałem ten sam problem, ponieważ dwukrotnie przełączałem modal, jak pokazano poniżej:
Usunąłem jedno wystąpienie:
i działało jak magia!
źródło