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

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>

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.

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.

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

Najlepsza forma do ukrywania i pokazywania modalu za pomocą bootstrapu

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

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

$("[data-dismiss=modal]").trigger({ type: "click" });

$('#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

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

$('.close').click(); 

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.

(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

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

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.

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

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

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

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

$("[data-dismiss=modal]").trigger({ type: "click" });

Użyłem tego prostego kodu:

$("#MyModal .close").click();

$('#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();

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

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.

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

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

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

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>

można to zrobić tylko w HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>