Come aprire una finestra modale Bootstrap usando jQuery?

769

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

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

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();
});
javascript  jquery  twitter-bootstrap 
— user244394
fonte
Hai un refuso nell'opzione show. Ci vuole un valore booleano, quindi non inserire virgolette tra 'false' - $ ('# my-modal'). Modal ({show: false});
— Darren Parker,

Risposte:

1413

Bootstrap ha alcune funzioni che possono essere chiamate manualmente su modali:

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

Puoi vedere di più qui: Componente modale Bootstrap

In particolare la sezione dei metodi .

Quindi dovresti cambiare:

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

per:

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

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

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

— Inseguire
fonte
5
Non sono sicuro del perché questo non funzioni nel mio caso. Ho lo stesso codice demo nella mia pagina e ho codificato il pulsante di invio come sopra. Tuttavia, quando faccio clic su Invia, la finestra modale lampeggia velocemente e scompare. Devo fare clic sul pulsante "indietro" del browser per tornare alla pagina.
— Chris22,
6
Ho trovato la risposta qui al mio commento sopra. Link duplicato a bootrap.js nelle pagine del sito.
— Chris22,
1
Uncaught TypeError: $ (...) .modal non è una funzione, questo sono probabilmente io ma qualche idea sul perché ottengo questo errore? (ho jQuery)
— Vladimir verleg,
4
Ho scoperto il mio problema, ho fatto una chiamata Ajax a un file che includeva Jquery. Se jQuery è incluso 2 volte non funziona!
— Vladimir verleg,
2
Ho provato .modal('show')ma nel browser Google Chrome non funziona
— Durga
89

Inoltre è possibile utilizzare tramite l'attributo dati

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

In questo caso particolare non è necessario scrivere javascript.

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

— Gandarez
fonte
4
Per chiarire: "non è necessario utilizzare javascript" significa "non è necessario scrivere javascript", javascript è ancora in uso. Ho provato a modificare la risposta ma è stata respinta perché non era "più accurata". Se provi il codice sopra con javascript disabilitato, non funzionerà. Ciò significa che usi Java per me.
— npretto,
83

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

Rimuovere uno dei collegamenti per farlo funzionare di nuovo.

Inoltre, alcuni plugin causano anche errori, in questo caso aggiungere 

jQuery.noConflict(); 
$('#myModal').modal('show');
— Vladimir verleg
fonte
3
DataTables con la sua versione jQuery preconfezionata ha causato questo per me
— Wesley Smith,
2
Grazie mille. Sto riscontrando lo stesso problema: modale non è una funzione. Ma dopo aver aggiunto jQuery.noConflict (), funziona.
— Jobayer Ahmmed
1
Va notato che questa soluzione alternativa dovrebbe essere utilizzata solo se non è possibile risolvere la causa principale (ovvero includere jQuery una sola volta). Se è incluso un plug-in di terze parti, cerca la versione non inclusa o contatta la terza parte per crearne una.
— rybo111,
19

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

Ecco un esempio:

$('#modal').modal();
— Brane
fonte
1
Come faccio a passare più parametri al mio modale? Ad esempio, un ID (dinamico) specifico?
— Pathros,
1
Come si fa a rendere dinamico il proprio ID? Lo fai per ID? in caso affermativo, è possibile utilizzare la funzionalità $ (this) di jQuery per selezionare l'oggetto corrente e passargli i parametri.
— Brane,
13

Se si utilizza la funzione onclick dei collegamenti per chiamare un modale da jQuery, "href" non può essere nullo.

Per esempio:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

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

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
— saneryee
fonte
12

Ecco come caricare l'avviso bootstrap non appena il documento è pronto. È molto semplice basta aggiungere

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

Ho fatto una demo su W3Schools.

<!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/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a 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">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Espandi frammento

— csandreas1
fonte
10

Scopri la soluzione completa qui:

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)

    <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/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— A.Aleem11
fonte
7

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

$('#myModal').appendTo("body").modal('show');
— il solito
fonte
2
Stesso! Questa è l'unica soluzione che ha funzionato anche per me.
— pengz,
Sei sicuro che non volesse .appendTo("modal-body")?
— James A Mohler,
@novembersky, devi inserire il codice all'interno dell'evento click o quando la pagina viene caricata usando jquery: $ (document) .ready (function () {$ ("# myModal"). modal ();});
— Abhijit Kumar
7

Prova a usare jQuery invece di $ sign quando chiami la funzione, nel mio caso ha funzionato come puoi vedere di seguito.

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

jQuery.noConflict (); perché quando jQuery ('# myModal'). modal ('show'); non funziona, è causato dall'inclusione di jQuery due volte. Includere jQuery 2 volte rende le modali non funzionanti. e risolverebbe il problema in quel caso, come nel mio caso si sta ripetendo.

Inoltre puoi andare a questo link

Finestra del modello Bootstrap non visualizzata chiamando tramite JQuery

— IB
fonte
4

Provare

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

Per aprire o chiudere il modale con id myModal.

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

1: - Spostare bootstrap.js verso il basso in modo da sovrascrivere altri file js.

2: - Assicurarsi che l'ordine sia come di seguito

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
— Nikhil Mohadikar
fonte
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Puoi avviare il modale con il codice qui sotto.

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

Prova questo

myModal1 è l'id di modale

$('#myModal1').modal({ show: true });
— Vivek
fonte
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
— Sahnosh Rahguzar
fonte
3
Quando rispondi a domande che hanno già delle risposte, prova a espandere le risposte esistenti. Inoltre è generalmente una buona idea includere una spiegazione di come il codice risponde alla domanda.
— Chris Camaratta,
0

Bootstrap 4.3 - altro qui

Mostra snippet di codice

— Kamil Kiełczewski
fonte
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.