Iron Router di Meteor non chiude la finestra di dialogo modale

Question

Uso Meteor e Iron Router e ho una finestra di dialogo modale che non nasconde lo sfondo quando viene chiusa. Per essere più precisi, voglio che dopo aver fatto clic sul pulsante di rimozione, il router ferro reindirizzerà a un'altra pagina. Il codice di reindirizzamento funziona, ma lo sfondo rimane visibile. Se rimuovo la linea di routing, la modal viene ignorata e lo sfondo fa altrettanto.

Ecco markup del modal:

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

Ecco il pulsante che attiva la finestra di dialogo modale:

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

Ecco l'evento click sul pulsante 'sì' della finestra di conferma modale :

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

Perché il routing lascia visibile lo sfondo?

Answer 1

Ci sono diverse soluzioni a questo, a seconda esattamente come si desidera il comportamento. Se vuoi che la modale si chiuda per prima, poi cambia la pagina, puoi usare una callback sul comportamento della modal.

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

Per quanto riguarda la domanda sul perché lo sfondo è visibile, è complicato. Lo sfondo viene nascosto solo una volta completata l'animazione "nascondi" e la modifica della pagina interrompe/arresta questo comportamento.

Answer 2

Una delle soluzioni sarebbe utilizzare i metodi jQuery per rimuovere lo sfondo dopo che l'utente è stato reindirizzato.

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

Tuttavia, per utilizzare questo metodo è necessario avere accesso al metodo Accounts.login che può essere acquisita con l'aggiunta di

gwendall: auth-client-callback pacchetto

al tuo meteoriti progetto