Bootstrap Modal natychmiast znika

203

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.

gorokizu
źródło
1
możesz przejść do twitter.github.com/bootstrap i postępować zgodnie z jego przykładami.
Maurício Giordano
2
Sprawiłem, że działało za pomocą onClick = "$ ('# myModal'). Modal ()" w tagu przycisku.
gorokizu
zastosował twoje podejście: onClick = "$ ('# myModal'). modal ()"
nikolai.serdiuk

Odpowiedzi:

467

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:

  • bootstrap.js (pełny pakiet BootStrap JS)
  • bootstrap.min.js (taki sam jak powyżej, tylko zminimalizowany)
  • bootstrap-modal.js (samodzielna wtyczka)
  • moduł ładujący zależność, np. require('bootstrap')

Wskazówki dotyczące debugowania

Dobrym miejscem do rozpoczęcia jest sprawdzenie clicknasł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.

merv
źródło
4
to zadziałało dla mnie, usunąłem bootstrap.js i zostawiłem bootstrap.min.js w. +1
Daniel Sun Yang
1
Przydarzyło mi się to, że zadeklarowałem bootstrap.js na <head> </head> i poniżej <footer> </footer> usunąłem ten z <head> </head>
CENT1PEDE
@PrinceTyke miałeś rację, adres URL bootstrap-modal.js był nieaktualny, więc tylko jeden ładował się (powodując, że działał). Naprawiłem to, żeby znów było zepsute.
merv
dzieje się tak również, jeśli umieścisz dwa pliki „bootstrap.js” w tym samym czasie, na tej samej stronie
Leandro RR
1
Dla mnie to był problem, ponieważ korzystałem z tego w połączeniu z pakietem ASP.NET, który pozwala określić adres CDN dla wdrożonych serwerów, oznacza to, że mój serwer wdrażania dostał ten problem, ale mój program był w porządku. Upewnij się więc, że usunąłeś bootstrapping z CDN, które oferują na swojej stronie internetowej, aby tego uniknąć.
Worthy7,
85

Miałem ten sam problem, ale miał inną przyczynę. Postępowałem zgodnie z dokumentacją i utworzyłem taki przycisk:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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.

Rory Hunter
źródło
Miałem dwie biblioteki bootstrap.js i bootstrap-editable.js, pomyślałem, że to ta sama biblioteka, więc usunąłem pierwszą i wszystko działa teraz.
Fedeco
25

Dla mnie zadziałało usunięcie

data-toggle="modal"

z przycisku. Sam przycisk może być dowolnym elementem - linkiem, divem, przyciskiem itp.

miCRoSCoPiC_eaRthLinG
źródło
1
Ten działał dla mnie. Nie jestem pewien, dlaczego, ponieważ reszta modali na mojej stronie wydaje się działać z tym dobrze, ale jeden z nich nie! Dziwne. W każdym razie dzięki!
blueprintchris
15

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.netpozwala określić pobieranie z bootstrapem lub bez - inni robią to samo).

Więc usunąłem bootstrap.min.jsz mojego bundle.configi wszystko działało dobrze.

John Lucas
źródło
Świetnie, ten rozwiązał mój problem z modalami. Zgadzam się, że to wcale nie było oczywiste. Dzięki
Haris,
13

Ten sam objaw w kontekście aplikacji Rails z Bootstrap dostarczonym przez bootstrap-sassklejnot, a odpowiedź @ merv postawiła mnie na dobrej drodze.

Mój application.jsplik miał następujące elementy:

//= require bootstrap
//= require bootstrap-sprockets

Rozwiązaniem było usunięcie jednej z dwóch linii. Rzeczywiście, readme klejnotu ostrzega przed tym błędem. Mój błąd.

Giuseppe
źródło
9

Mój kod w jakiś sposób zawierał plik bootstrap.min.js dwukrotnie. Usunąłem jeden z nich i wszystko działa teraz dobrze.

Ricardo Pieper
źródło
W moim przypadku dodałem oba
pliki
Ta odpowiedź pomogła mi, ktoś włączył bootstrap js z cdn, mimo że był już zainstalowany z npm
BritishSam
8

e.preventDefault(); z jquery ui

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

LX-3
źródło
8

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:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

Jeśli tak się stanie, zdarzenie zostanie wystrzelone dwa razy z rzędu, a modal zniknie.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

Zobacz przykład: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

gpasse
źródło
3
@karadayi to nie jest „Poprawka”, tylko przypadek, w którym taki problem może wystąpić.
gpasse
7

Natrafiłem na ten sam objaw, który @gpasse pokazał w jego przykładzie. Oto mój kod ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

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:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

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

JDev
źródło
4

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

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

do

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

I to naprawiło problem zniknięcia.

doug
źródło
3

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:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Po prostu dodałem e.preventDefault (); i działało to jak urok.

Mój nowy kod był taki jak poniżej:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>
Mekey Salaria
źródło
1
Tak, to mnie ugryzło. Dzięki.
Jeremy Harris
3

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.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}
gmaliar
źródło
3

W moim przypadku kliknięcie przycisku powoduje (niepożądane) ponowne załadowanie strony.

Oto moja poprawka:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>
akop
źródło
To najlepsza ścieżka, jeśli załadujesz wiele bibliotek JS.
Daniel Vukasovich
2

W moim przypadku używam actionlinkprzycisku 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

 $('#ModalId').modal('show');

Przed błędem używam tego przycisku

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

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

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

wtedy problem został rozwiązany tylko błąd z powodu braku # w pierwszym.

sprawdź, czy to ci pomoże.

Saurabh Solanki
źródło
2

Jeszcze jedna przyczyna / rozwiązanie! Miałem w kodzie JS:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Ale mój kod HTML został już napisany jako:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

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-targetoraz data-togglew html zgodnie z dokumentacją Bootstrap dokumenty już uruchamiają modal do działania. Dlatego kod JS jest redundantny i po usunięciu działa.

James
źródło
1

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.

Temu
źródło
1

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.

Satheeshwaran
źródło
1

Ten sam problem miałem podczas testów na urządzeniach mobilnych i ta sztuczka zadziałała dla mnie

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

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

Bhargaw
źródło
Zgodnie z powyższą sugestią @RoryHunter, wystarczy zmienić przycisk, type="submit"aby type="button"rozwiązać ten problem.
Richard Hauer,
1

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.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->
brntsllvn
źródło
1

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:

<a href="" onclick="do_some_stuff()">Hey</a>

Skończyło się na dodawaniu „#” do href, aby link nigdzie nie trafił i to rozwiązało mój problem.

<a href="#" onclick="do_some_stuff()">Hey</a>
Eutychus
źródło
1

Czy próbowałeś usunąć?

data-dismiss="modal"
JeffNhan
źródło
0

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.

Pete
źródło
0

Dodałem bootstrapdo mojego projektu za pośrednictwem bower, a następnie zaimportowałem bootstrap.min.jsplik i po nim modal.js. (Przycisk otwierający modal znajduje się w formularzu). Po prostu usuwam import dla modal.jsi to działa dla mnie.

pableiros
źródło
0

na wypadek, gdyby ktoś używał bootstrap Codeigniter 3 z możliwością datowania.

poniżej jest moja poprawka w config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'
brawo netto
źródło
0

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

  • Ładowanie więcej niż jednej wersji / plików bootstrap js (zminimalizowane ...)
  • Dodawanie zewnętrznego kalendarza do strony, na której używany jest bootstrap
  • Dodanie niestandardowej alertu lub wyskakującej biblioteki do strony
  • Każda inna biblioteka, która dodaje zachowanie wyskakującego okienka
Shantha Kumara
źródło
0

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

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

UWAGA: należy zaimportować jquery do pliku ts jako „deklaruj var $: any;”

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

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');”

Bhagvat Lande
źródło
0

Miałem ten sam problem, ponieważ dwukrotnie przełączałem modal, jak pokazano poniżej:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Usunąłem jedno wystąpienie:

$ ('# myErrorModal'). modal ('toggle')

i działało jak magia!

Pholoso Mams
źródło