Meteor Iron Router schließt modalen Dialog nicht

Question

Ich benutze Meteor und Iron Router, und ich habe einen modalen Dialog, der den Hintergrund nicht versteckt, wenn es entlassen wird. Um genauer zu sein, möchte ich, dass der eiserne Router nach dem Klicken auf die Schaltfläche zum Schließen auf eine andere Seite umleitet. Der Umleitungscode funktioniert, aber der Hintergrund bleibt sichtbar. Wenn ich die Routing-Linie entferne - wird das Modal und damit auch der Hintergrund verworfen.

Dies ist die Markup-modale:

<div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title" id="modal-title">Are you sure?</h4> 
      </div> 
      <div class="modal-body"> 
       This cannot be undone. 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-danger" data-dismiss="modal" id="confirm-yes-button">Yes</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 
      </div> 
     </div> 
    </div> 
</div> 

Hier ist die Taste, die den modalen Dialog wechselt:

<button type="button" id="delete-recipe-btn" data-target="#confirm-modal" data-toggle="modal" class="btn btn-primary btn-danger pull-right">Delete</button> 

Hier ist das Click-Ereignis auf der 'Ja' Taste des confirm modalen Dialogs :

'click #confirm-yes-button': function() { 
    Recipes.remove(this._id); 
    $('#confirm-modal').modal('hide'); 
    Router.go('/'); 
} 

Warum sollte das Routing den Hintergrund sichtbar lassen?

Answer 1

Es gibt mehrere Lösungen für diese, je nachdem, wie Sie das Verhalten genau wünschen. Wenn das Modal zuerst ausgeblendet werden soll und dann die Seite geändert werden soll, können Sie einen Rückruf für das Verhalten des Modals verwenden.

'click #confirm-yes-button': function() { 
    Recipes.remove(this._id); 
    $('#confirm-modal') 
     .on('hidden.bs.modal', function() { 
      Router.go('/'); 
     }) 
     .modal('hide'); 
} 

Auf Ihre Frage, warum der Hintergrund sichtbar ist - es ist kompliziert. Der Hintergrund wird erst nach Abschluss der "Verdecken" -Animation ausgeblendet und das Ändern der Seite unterbricht dieses Verhalten.

Answer 2

Eine der Lösungen wäre die Verwendung von jQuery-Methoden zum Entfernen des Hintergrunds , sobald der Benutzer umgeleitet wurde.

Accounts.onLogin(function(){ 
    Router.go('/'); 
    $('.modal-backdrop').remove(); 
}); 

jedoch diese Methode Sie verwenden müssen, um den Zugang zu Accounts.login Methode, die durch Zugabe erworben werden können

gwendall: Auth-client-Rückrufe

Paket auf Ihren Meteor Projekt