Bootstrap Modal natychmiast znika

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.

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.

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.

Dla mnie zadziałało usunięcie

data-toggle="modal"

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

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.

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.

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

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.

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

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.

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.

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>

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);
}

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>

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.

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.

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.

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.

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

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

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>

Czy próbowałeś usunąć?

data-dismiss="modal"

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.

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.

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'

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

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

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!