Come nascondere Bootstrap modale con javascript?

Ho letto i post qui, il sito Bootstrap e ho cercato su Google come matti, ma non riesco a trovare quello che sono sicuro sia una risposta facile ...

Ho un modale Bootstrap che apro da un link_to helper in questo modo:

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

Nella mia ContactsController.createazione, ho un codice che crea e Contactpoi passa a create.js.erb. In create.js.erb, ho qualche codice di gestione degli errori (un mix di ruby ​​e javascript). Se tutto va bene, voglio chiudere il modale.

Questo è dove sto avendo problemi. Non riesco a respingere il modale quando tutto va bene.

Ci ho provato $('#myModal').modal('hide');e questo non ha alcun effetto. Ho anche provato ciò $('#myModal').hide();che provoca il rigetto del modale ma lascia lo sfondo.

Qualche guida su come chiudere il modale e / o respingere lo sfondo dall'interno create.js.erb?

modificare

Ecco il markup per 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>

Con il modale aperto nella finestra del browser, utilizzare la console del browser per provare

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

Se funziona (e il modale si chiude) allora sai che il tuo Javascript non viene inviato dal server al browser correttamente.

Se non funziona, è necessario indagare ulteriormente sul client che cosa sta accadendo. Ad esempio, assicurarsi che non ci siano due elementi con lo stesso ID. Ad esempio, funziona la prima volta dopo il caricamento della pagina ma non la seconda volta?

Console del browser: firebug per firefox, la console di debug per Chrome o Safari, ecc.

per chiudere il bootstrap modale puoi passare 'nascondi' come opzione al metodo modale come segue

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

Dai un'occhiata al violino di lavoro qui

bootstrap fornisce anche eventi che puoi agganciare alla funzionalità modale , come se vuoi lanciare un evento quando il modale ha finito di essere nascosto all'utente, puoi usare l' evento hidden.bs.modal puoi leggere di più sui metodi modali ed eventi qui in Documentazione

Se il metodo non funziona sopra, dai un id al tuo pulsante di chiusura e fai clic sul pulsante di chiusura.

Uso Bootstrap 3.4 Per me questo non funziona

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

Nella disperazione, ho fatto questo:

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

Forse non è elegante, ma funziona

La forma migliore per nascondere e mostrare un modale con bootstrap è

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

Ho riscontrato lo stesso errore e questa riga di codice mi aiuta davvero.

$("[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

Ho trovato la soluzione corretta è possibile utilizzare questo codice

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

Mi sono imbattuto in quello che credo fosse un problema simile. Il $('#myModal').modal('hide');è probabilmente in esecuzione attraverso quella funzione e colpisce la linea

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

Il problema è che il valore visualizzato può essere indefinito anche se viene visualizzato il modale e il valore deve essere vero. Ho modificato leggermente il codice bootstrap nel modo seguente

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

Questo sembrava risolvere il problema per la maggior parte. Se lo sfondo rimane ancora, puoi sempre aggiungere una chiamata per rimuoverla manualmente dopo la chiamata nascosta $('.modal-backdrop').remove();. Non è affatto l'ideale ma funziona.

(Facendo riferimento a Bootstrap 3), Per nascondere l'uso modale: $('#modal').modal('hide') . Ma il motivo per cui lo sfondo è rimasto sospeso (per me) era perché stavo distruggendo il DOM per il modale prima che finisse 'hide'.

Per risolvere questo problema, ho concatenato l'evento nascosto con la rimozione del DOM. Nel mio caso:this.render()

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

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

$modal.modal('hide'); //start hiding

Ho avuto più fortuna a effettuare la chiamata dopo il callback "mostrato":

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

Ciò ha garantito il caricamento modale prima che fosse effettuata la chiamata hide ().

Quello che abbiamo scoperto è stato che c'era solo un leggero ritardo tra la chiamata al nostro codice server e il ritorno alla chiamata di successo. Se avessimo inserito la chiamata al server nel $("#myModal").on('hidden.bs.modal', function (e)gestore e avessimo chiamato il $("#myModal").modal("hide");metodo, il browser nasconderebbe il modale e quindi invocherebbe il codice lato server.

Ancora una volta, non elegante ma funzionale.

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

Come puoi vedere, quando myFuncviene invocato, nasconderà il modale e quindi invocherà il codice lato server.

Stavo riscontrando lo stesso problema e dopo un po 'di sperimentazione ho trovato una soluzione. Nel mio gestore di clic, avevo bisogno di fermare il gorgogliamento dell'evento, in questo modo:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

Ecco il documento: http://getbootstrap.com/javascript/#modals-methods

Ecco il metodo: $ ('# myModal'). Modal ('hide')

Se hai bisogno di aprire più volte il modale con contenuti diversi, ti suggerisco di aggiungere (in te js principali):

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

Quindi pulirai il contenuto per la prossima apertura ed eviterai una sorta di cache

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

Anche io ho lo stesso tipo di problemi. Questo mi ha aiutato molto

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

Ho usato questo semplice codice:

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

$('#modal').modal('hide');e le sue varianti non funzionavano per me a meno che non avessi data-dismiss="modal"come attributo il pulsante Annulla. Come te, le mie esigenze dovevano forse chiudere / possibilmente non chiudere in base a qualche logica aggiuntiva, quindi fare clic su un collegamento con la data-dismiss="modal"regola non avrebbe funzionato. Ho finito per avere un pulsante nascosto con data-dismiss="modal"cui ho potuto invocare a livello di codice il gestore di clic, quindi

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

e poi all'interno dei gestori dei clic per annullare quando è necessario chiudere il modale che si può avere

$('#hidden-cancel').click();

Dobbiamo occuparci del gorgoglio degli eventi. È necessario aggiungere una riga di codice

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Mi rendo conto che questa è una vecchia domanda, ma ho scoperto che nessuno di questi era proprio quello che cercavo esattamente. Sembra essere causato dal tentativo di chiudere il modale prima che finisca di essere mostrato.

La mia soluzione era basata sulla risposta di @ schoonie23 ma ho dovuto cambiare alcune cose.

Innanzitutto, ho dichiarato una variabile globale nella parte superiore del mio script:

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

Quindi nel mio codice modale:

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

Quindi questo: (Notare il nome "shows.bs.modal" che indica che il modale ha mostrato completamente invece di "show" che si innesca quando viene chiamato l'evento show. (Inizialmente ho provato solo "mostrato" ma non ha funzionato. )

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

Spero che questo salvi qualcuno la ricerca extra un giorno. Ho trascorso un po 'a cercare una soluzione prima di trovare questo.

Ho usato questo codice -

Nascondi modale con effetto uniforme usando Fade Out.

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

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

$('.modal-open').css({'overflow': 'visible'});

Se stai usando la classe stretta nei tuoi modali, funzionerà quanto segue. A seconda del caso d'uso, in genere raccomando di filtrare solo il modale visibile se ci sono più di un modale con la classe chiusa.

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

document.getElementById ( 'closeButton') clicca ().; // aggiungi un attributo data-dismiss = "modal" a un elemento nel modal e dagli questo id

Questa è la cattiva pratica ma puoi usare questa tecnica per chiudere modale chiamando il pulsante Chiudi in javascript. Questo si chiuderà modale dopo 3 secondi.

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

questo può essere fatto solo in HTML:

data-dismiss="modal"

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