Jak ukryć modalność Bootstrap za pomocą javascript?

281

Przeczytałem tutaj posty, stronę Bootstrap i Googled jak szalony - ale nie mogę znaleźć na pewno łatwej odpowiedzi ...

Mam modal Bootstrap, który otwieram z pomocnika link_to w następujący sposób:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

W mojej ContactsController.createakcji mam kod, który tworzy, Contacta następnie przekazuje do create.js.erb. W create.js.erb, mam trochę kodu obsługi błędów (mieszanka ruby ​​i javascript). Jeśli wszystko pójdzie dobrze, chcę zamknąć modal.

To tutaj mam problemy. Nie mogę odrzucić modalu, kiedy wszystko idzie dobrze.

Próbowałem $('#myModal').modal('hide');i to nie ma wpływu. Próbowałem również, $('#myModal').hide();co powoduje, że modal odrzuca, ale pozostawia tło.

Wszelkie wskazówki, jak zamknąć modal i / lub odrzucić tło od wewnątrz create.js.erb?

Edytować

Oto znacznik dla myModal:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>
Jvillian
źródło
1
$('#myModal').modal('hide');jest poprawną składnią do zamykania / ukrywania modalu o id myModal(możesz to przetestować na stronie dokumentacji Bootstrap ). Czy na pewno masz element o tym identyfikatorze na swojej stronie? Co również próbujesz osiągnąć dzięki temu połączeniu? Twoja obecna implementacja wykonuje żądanie Ajax new_contact_pathi jednocześnie otwiera modal z zawartością #myModal- czy tego właśnie chcesz?
Julian D.
Cześć, Julian. Powyżej zamieściłem znacznik myModal i rzeczywiście istnieje div z identyfikatorem myModal. Spróbowałem ponownie $('myModal').modal('hide')i nadal nie jestem dobry. HM Pod względem tego, co próbuję osiągnąć, myślę, że użycie pomocnika link_to mogło być niepoprawne. Zastąpiłem to: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>ponieważ tak naprawdę nie potrzebuję dzwonić do new_contact_path. Chcę tylko, aby modal się otworzył, a następnie zajął się wprowadzaniem przez użytkownika. Dzięki za poświęcenie czasu na odpowiedź. Zobaczę, czy nie mogę tego rozwiązać.
jvillian
Myślę, że to tylko literówka, ale połączenie powinno być $('#myModal').modal('hide');( #brakuje komentarza).
Julian D.
1
Moje złe pisanie zamiast kopiowania z rzeczywistego kodu. Rzeczywisty kod brzmi: $('#myModal').modal('hide'). J
Jvillian
Możesz spróbować użyć bootboxjs
md. ariful ahsan

Odpowiedzi:

493

Gdy modal jest otwarty w oknie przeglądarki, użyj konsoli przeglądarki, aby spróbować

$('#myModal').modal('hide');

Jeśli to działa (a modal zamyka się), to wiesz, że twój zamknięty Javascript nie jest poprawnie wysyłany z serwera do przeglądarki.

Jeśli to nie działa, musisz dokładniej zbadać, co się dzieje. Np. Upewnij się, że nie ma dwóch elementów o tym samym identyfikatorze. Np. Czy działa po raz pierwszy po załadowaniu strony, ale nie po raz drugi?

Konsola przeglądarki: firebug dla Firefoxa, konsola debugująca dla Chrome lub Safari itp.

Larry K.
źródło
Drugi akapit był tym, czego szukałem. Zduplikowane identyfikatory sprawiły, że moje moduły nie wyświetlały się poprawnie za drugim razem.
Matias
To rozwiązało problem. Dzięki.
Finchy70
77

aby zamknąć modal bootstrap , możesz przekazać „hide” jako opcję metody modalnej w następujący sposób

$('#modal').modal('hide');

Proszę spojrzeć na działające skrzypce tutaj

bootstrap zapewnia również zdarzenia, które można podłączyć do funkcjonalności modalnej , np. jeśli chcesz uruchomić zdarzenie, gdy modal jest już ukryty przed użytkownikiem, możesz użyć ukrytego. bs.modal zdarzenia możesz przeczytać więcej o metodach modalnych i zdarzeniach tutaj w Dokumentacja

Jeśli żadna z powyższych metod nie działa, podaj identyfikator przycisku zamknięcia i naciśnij przycisk zamknięcia.

Subodh Ghulaxe
źródło
1
Jest to szczególnie przydatne, gdy dokładnie wiesz, w którym momencie modalne okno dialogowe ma zostać zamknięte. Na przykład na końcu funkcji sukcesu. W ten sposób, jeśli wystąpi błąd, okno dialogowe może go wyświetlić.
Czy
47

Używam Bootstrap 3.4 Dla mnie to nie działa

$('#myModal').modal('hide')

W desperacji zrobiłem to:

$('#myModal').hide();
$('.modal-backdrop').hide();

Może nie jest elegancki, ale działa

gaza
źródło
2
Byłoby lepiej, gdybyś użył $ (". Modal-backdrop"). Remove ();
Bloodhound,
1
wprowadzi to nowe błędy. proszę użyć zalecanych metod,
Benjamin Eckstein
jQuery ('. modal-backdrop'). click ();
mały buggy, ale na pewno działa. Rozwiązanie Manuela Fernando poniżej działało dla mnie idealnie.
Munam Yousuf
@Umingo, proszę polecić metodę, jeśli te wymienione tutaj nie są dobre i znasz ją.
rozpiętość
47

Najlepsza forma do ukrywania i pokazywania modalu za pomocą bootstrapu

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
Royer Vazquez
źródło
Jak dotąd najlepsza odpowiedź. Symulowanie zachowania za pomocą kliknięć, jQuery fadeOut lub css może na dłuższą metę powodować niedopasowania.
Giorgio Tempesta
43

Wystąpił ten sam błąd i ten wiersz kodu naprawdę mi pomaga.

$("[data-dismiss=modal]").trigger({ type: "click" });
Manuel Fernando
źródło
1
Przeczytałem inny problem, który sugerował, że problemem może być atrybut odrzucania danych w elemencie, a następnie próba wyzwolenia go z javascript
Femtosecond
Many Many Many Thanks Manuel, to po wielu poszukiwaniach rozwiązało mój problem $ ('# MyModelId'). Modal ('hide'); $ („[data-dismiss = modal]”). trigger ({type: „click”}); że chciałem zamknąć modal na sukces w ajax .... naprawdę
wielkie
22
$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class
Shivam
źródło
zadziałało, ale zepsuło modalność, jeśli ponownie go otworzę, modal już się nie przewija
Kos
21

Znalazłem prawidłowe rozwiązanie, w którym możesz użyć tego kodu

$('.close').click(); 
Osama khodrog
źródło
najlepsze jak dotąd rozwiązanie
Kos
znakomity to po prostu najlepszy +1
MooMoo
11

Natknąłem się na coś, co moim zdaniem było podobne. $('#myModal').modal('hide');Prawdopodobnie uruchomiony przez tą funkcją i uderza linię

if (!this.isShown || e.isDefaultPrevented()) return

Problem polega na tym, że wartość isShown może być niezdefiniowana, nawet jeśli wyświetlany jest modal, a wartość powinna być prawdziwa. Zmodyfikowałem nieco kod ładowania początkowego do następującego

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Wydawało się, że to w większości rozwiązało problem. Jeśli tło nadal pozostaje, zawsze możesz dodać połączenie, aby ręcznie usunąć je po połączeniu ukrytym $('.modal-backdrop').remove();. Wcale nie jest idealny, ale działa.

Richard Handley
źródło
11

(W odniesieniu do Bootstrap 3), w celu ukrycia modalnej użycie: $('#modal').modal('hide'). Ale powodem, dla którego tło pozostało (dla mnie) było to, że niszczę DOM dla modalu, zanim zakończyło się „ukrywanie”.

Aby rozwiązać ten problem, powiązałem ukryte zdarzenie z usunięciem DOM. W moim przypadku:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding
Nathan
źródło
1
ale czy możesz mi powiedzieć o this.render()jego wyświetlaniu undefined is not a functionw mojej chromowanej konsoli.
Anil Kumar Pandey,
9

Miałem więcej szczęścia, wykonując połączenie po wystąpieniu „pokazanego” oddzwaniania:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Zapewniło to załadowanie modalu przed wykonaniem wywołania hide ().

schoonie23
źródło
8

Odkryliśmy, że między wywołaniem naszego kodu serwera a powrotem do udanego połączenia zwrotnego było tylko niewielkie opóźnienie. Jeśli zapakowaliśmy wywołanie do serwera w $("#myModal").on('hidden.bs.modal', function (e)module obsługi, a następnie wywołaliśmy $("#myModal").modal("hide");metodę, przeglądarka ukryłaby modal, a następnie wywołała kod po stronie serwera.

Znowu nie elegancki, ale funkcjonalny.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Jak widać, myFuncwywołanie spowoduje ukrycie modalu, a następnie wywołanie kodu po stronie serwera.

markdotnet
źródło
6

Miałem ten sam problem i po kilku eksperymentach znalazłem rozwiązanie. W moim module obsługi kliknięć musiałem zatrzymać wyświetlanie zdarzenia, takie jak:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
brentmc79
źródło
6

Oto dokument: http://getbootstrap.com/javascript/#modals-methods

Oto metoda: $ ('# myModal'). Modal ('hide')

Jeśli chcesz otworzyć kilka razy modal z inną zawartością, proponuję dodać (w tobie główne js):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Więc wyczyścisz zawartość do następnego otwarcia i unikniesz pewnego rodzaju buforowania

Christophe Meheut Forik 21
źródło
6
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 
Nieograniczona isa
źródło
5

Nawet ja mam takie same problemy. To bardzo mi pomogło

$("[data-dismiss=modal]").trigger({ type: "click" });
Jaggi
źródło
5

Użyłem tego prostego kodu:

$("#MyModal .close").click();
Viktor Kisil'ov
źródło
4

$('#modal').modal('hide');i jego warianty nie działały dla mnie, chyba że miałem data-dismiss="modal"jako atrybut przycisk Anuluj. Tak jak ty, moje potrzeby były możliwe do zamknięcia / ewentualnie zamknięcia w oparciu o jakąś dodatkową logikę, więc kliknięcie linku z data-dismiss="modal"bezpośrednim nie wystarczy. Skończyło się na tym, data-dismiss="modal"że mam ukryty przycisk, z którego mógłbym programowo wywołać moduł obsługi kliknięć, więc

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

a następnie w modułach obsługi kliknięć, aby anulować, gdy musisz zamknąć modal, jaki możesz mieć

$('#hidden-cancel').click();
Tyler
źródło
W moim przypadku (strona z brzytwą asp net) miałem to podobne do OP: miałem nieco pusty div z klasą „modal” i dynamicznie dodałem do niego plik cshtml, np. Ciało modalne i kliknąłem przycisk tego ciało, gdy tylko zostanie pokazany modal. samo wywołanie „.modal („ ukryj) ”nie było wystarczające, jak zauważyłeś:„ data-disciss = "modal” ”na przycisku wywołującym była okazją !!! ty
Csharpest
3

Musimy zadbać o bulgotanie zdarzeń. Musisz dodać jeden wiersz kodu

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
Prathap Kudupu
źródło
3

Zdaję sobie sprawę, że to stare pytanie, ale stwierdziłem, że żadne z nich nie było dokładnie tym, czego dokładnie szukałem. Wydaje się, że jest to spowodowane próbą zamknięcia modalu przed jego zakończeniem.

Moje rozwiązanie opierało się na odpowiedzi @ schoonie23, ale musiałem zmienić kilka rzeczy.

Najpierw zadeklarowałem zmienną globalną na początku mojego skryptu:

<script>
    var closeModal = false;
    ...Other Code...

Następnie w moim kodzie modalnym:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Następnie: (Zwróć uwagę na nazwę „pokazano.bs.modal” wskazującą, że modal pokazał się całkowicie w przeciwieństwie do „show”, który uruchamia się po wywołaniu zdarzenia show. (Początkowo próbowałem po prostu „pokazano”, ale to nie zadziałało. )

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Mam nadzieję, że to kiedyś uratuje komuś dodatkowe badania. Zanim to wymyśliłem, trochę szukałem rozwiązania.

Jason Godson
źródło
2

Użyłem tego kodu -

Ukryj modal z płynnym efektem za pomocą Fade Out.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});
Sanjay Singhal
źródło
1

Jeśli używasz klasy zamkniętej w swoich modach, następujące będą działać. W zależności od przypadku użycia, ogólnie polecam filtrowanie tylko do widocznego modalu, jeśli istnieje więcej niż jeden modal z klasą zamkniętą.

$('.close:visible').click();
Dave
źródło
0

document.getElementById ('closeButton'). click (); // dodaj atrybut data-dismiss = "modal" do elementu w module i nadaj mu ten identyfikator

Dr. XD
źródło
-1

Jest to zła praktyka, ale możesz użyć tej techniki do zamknięcia modalu, wywołując przycisk zamykania w javascript. Spowoduje to zamknięcie modalu po 3 sekundach.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

źródło
-2

można to zrobić tylko w HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>
jarosik
źródło
@KevinFrancis Ponieważ pytanie szuka programowego sposobu, aby to zrobić ze sterownika, a nie jak zrobić przycisk, który to robi.
GreenAsJade