Come nascondere Bootstrap modale con javascript?


282

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>

1
$('#myModal').modal('hide');è la sintassi corretta per chiudere / nascondere il modale con id myModal(è possibile verificarlo nella pagina della documentazione Bootstrap ). Sei sicuro di avere un elemento con questo ID nella tua pagina? Inoltre, cosa stai cercando di realizzare con questa chiamata? La tua attuale implementazione esegue una richiesta Ajax new_contact_pathe allo stesso tempo apre la modale con i contenuti di #myModal- è questo quello che vuoi?
Julian D.

Ciao Julian. Ho pubblicato il markup myModal sopra e c'è, in effetti, un div con ID myModal. Ho riprovato $('myModal').modal('hide')e ancora non va bene. HM. In termini di ciò che sto cercando di realizzare, penso che potrebbe essere stato errato utilizzare l'helper link_to. L'ho sostituito con: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>poiché non ho davvero bisogno di una chiamata a new_contact_path. Voglio solo che il modale si apra e poi gestisca l'input dell'utente. Grazie per il tempo dedicato a rispondere. Vedrò se non riesco a risolvere questo problema.
jvillian,

Immagino sia solo un errore di battitura, ma la chiamata dovrebbe essere $('#myModal').modal('hide');( #manca un commento).
Julian D.

1
Il mio male per la digitazione invece di copiare dal codice reale. Il codice vero e proprio si legge: $('#myModal').modal('hide'). J
jvillian,

Puoi provare a usare bootboxjs
md. ariful ahsan,

Risposte:


494

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.


Il secondo paragrafo era quello che stavo cercando. Gli ID duplicati stavano facendo in modo che i miei modali non mostrassero correttamente la seconda volta.
Matias,

Ciò ha risolto il problema per me. Grazie.
Finchy70,

77

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.


1
Ciò è particolarmente utile quando sai esattamente a che punto si dovrebbe chiudere la finestra di dialogo modale. Ad esempio alla fine di una funzione di successo. In questo modo se si verifica un errore, la finestra di dialogo può visualizzarlo.
Will

47

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


2
Sarebbe meglio se usi $ (". Modal-scenografia"). Remove ();
Bloodhound,

1
questo introdurrà nuovi bug. si prega di utilizzare i metodi consigliati,
Benjamin Eckstein

jQuery ( 'modal-sfondo.') clicca ().;

piccolo passeggino ma sicuramente funziona. La soluzione di Manuel Fernando qui sotto ha funzionato perfettamente per me.
Munam Yousuf,

@Umingo, per favore, consigli un metodo se quelli menzionati qui non sono buoni e tu ne conosci uno.
durata

47

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

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

La migliore risposta di gran lunga. La simulazione del comportamento con clic, jQuery fadeOut o css può creare disallineamenti a lungo termine.
Giorgio Tempesta,

43

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

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

1
Ho letto un altro problema che ha suggerito che il problema potrebbe essere avere l'attributo di eliminazione dei dati sull'elemento, quindi in cima a questo tentativo di attivarlo da JavaScript
Femtosecond

Molte Molte Molte grazie Manuel, questo dopo molte ricerche ha risolto il mio problema, $ ('# MyModelId'). Modal ('hide'); $ ("[data-dismiss = modal]"). trigger ({type: "click"}); che volevo chiudere il modale sul successo ajax .... davvero molte grazie mio caro
abdelrhman raafat

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

ha funzionato, ma si è rotto modale se lo apro di nuovo modale non scorre più
kosas

21

Ho trovato la soluzione corretta è possibile utilizzare questo codice

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

la migliore soluzione finora
kosas

superb è semplicemente il migliore +1
MooMoo

11

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.


11

(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

1
ma puoi parlarmi della this.render()sua undefined is not a functionconsole Chrome.
Anil Kumar Pandey il

9

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


8

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.


6

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

6

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


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

5

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

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


4

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

Nel mio caso (asp net razor page) l'ho avuto simile all'OP: avevo un div piuttosto vuoto con classe "modale" e ho aggiunto dinamicamente un file cshtml, ad esempio il corpo modale e ho aggiunto un clic a un pulsante di questo corpo non appena verrà mostrato il modale. chiamare ".modal ('hide)" da solo non era sufficiente, come hai sottolineato: "data-dismiss =" modal "" sul pulsante invocazione era l'affare !!! ty
Csharpest,

3

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

3

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.


2

Ho usato questo codice -

Nascondi modale con effetto uniforme usando Fade Out.

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

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

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

1

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

0

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


-1

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>

-2

questo può essere fatto solo in HTML:

data-dismiss="modal"

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

@KevinFrancis Perché la domanda sta cercando un modo programmatico per farlo dal controller, non come fare un pulsante che lo fa.
GreenAsJade,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.