Come aprire una finestra modale Bootstrap usando jQuery?

Sto usando la funzionalità della finestra modale di Bootstrap di Twitter. Quando qualcuno fa clic su Invia nel mio modulo, voglio mostrare la finestra modale facendo clic sul pulsante “Invia” nel modulo.

BootStap Wizzard Form

jQuery:

 $('#myform').on('submit', function(ev) { $('#my-modal').modal({ show: 'false' }); var data = $(this).serializeObject(); json_data = JSON.stringify(data); $("#results").text(json_data); $(".modal-body").text(json_data); // $("#results").text(data); ev.preventDefault(); }); 

Bootstrap ha alcune funzioni che possono essere richiamate manualmente sulle modali:

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

Puoi vedere di più qui: Componente modale Bootstrap

Specificamente la sezione dei metodi .

Quindi dovresti cambiare:

 $('#my-modal').modal({ show: 'false' }); 

a:

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

Se stai cercando di creare un tuo popup personalizzato, ecco un video suggerito da un altro membro della comunità:

https://www.youtube.com/watch?v=zK4nXa84Km4

Inoltre è ansible utilizzare tramite l’attributo dei dati

  

In questo caso particolare non è necessario utilizzare javascript.

Puoi vedere di più qui: http://getbootstrap.com/2.3.2/javascript.html#modals

Molto spesso, quando $('#myModal').modal('show'); non funziona, è causato dall’aver incluso jQuery due volte. Includere jQuery per 2 volte rende le modali non funzionanti.

Rimuovi uno dei link per farlo funzionare di nuovo.

Inoltre, alcuni plugin causano errori, in questo caso aggiungi

 jQuery.noConflict(); $('#myModal').modal('show'); 

Basta chiamare il metodo modale (senza passare alcun parametro) usando il selettore jQuery .

Ecco un esempio:

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

Se usi la funzione onclick dei link per chiamare un modal da jQuery, “href” non può essere nullo.

Per esempio:

 ... ... Open a Modal by jQuery ... ... ... ...  

Il modale non può mostrare. Il codice giusto è:

 Open a Modal by jQuery 

Controlla qui la soluzione completa:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Assicurati di mettere le librerie nell’ordine richiesto per ottenere il risultato:

1- Primo bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(In altre parole jquery.min.js deve essere chiamato prima di bootstrap.min.js)

     

Ho provato diversi metodi che hanno fallito, ma il sotto ha funzionato per me come un incantesimo:

 $('#myModal').appendTo("body").modal('show'); 

Ecco come caricare l’avviso di bootstrap non appena il documento è pronto. È molto facile, basta aggiungere

  $(document).ready(function(){ $("#myModal").modal(); }); 

Ho realizzato una demo su W3Schools.

    Bootstrap Example        

Here is how to load a bootstrap modal as soon as the document is ready

 

BootStap Wizzard Form

Puoi avviare il modal con il codice sotto questo.

 $(document).ready(function(){ $("#submitButton").click(function(){ $("#myModal").modal(); }); }); 

Provare

 $("#myModal").modal("toggle") 

Per aprire o chiudere la modal con id myModal.

Se quanto sopra non funziona, vuol dire che bootstrap.js è stato sovrascritto da qualche altro file js. Ecco una soluzione

1: – Sposta bootstrap.js in basso in modo che sovrascriva altri file js.

2: – Assicurati che l’ordine sia come sotto