Come aprire una finestra modale Bootstrap usando jQuery?

Question

Sto utilizzando 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.

<form id="myform" class="form-wizard"> 
    <h2 class="form-wizard-heading">BootStap Wizzard 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(); 
}); 

Answer 1

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

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

Potete vedere di più qui: Bootstrap modal component

In particolare il methods section .

Quindi si avrebbe bisogno di cambiare:

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

a:

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

Se stai cercando di fare un pop-up personalizzato del proprio, ecco un video suggerito da un altro membro della comunità:

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

Answer 2

Inoltre è possibile utilizzare tramite attributo dati

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

In questo caso particolare non è necessario utilizzare javascript.

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

Answer 3

Il più delle volte, quando $('#myModal').modal('show'); non funziona, è causata da aver incluso jQuery due volte. Includere jQuery per 2 volte rende le modali non funzionanti.

Rimuovere uno dei collegamenti per farlo funzionare di nuovo.

Inoltre, alcuni plugin causano errori anche in questo caso aggiungere

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

Answer 4

chiamate il metodo modale (senza passare alcun parametro) utilizzando jQuery selettore.

Ecco esempio:

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

Answer 5

Se si utilizza la funzione onclick di link per chiamare un modale jQuery, il "href" non può essere nulla.

Ad 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 corretto è:

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

Answer 6

estrarre la soluzione completa qui:

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

Assicurati di mettere le librerie in modo necessario per ottenere risultato:

1- Prima di bootstrap. min.css 2- jquery.min.js 3- bootstrap.min.js

(In altre parole jquery.min.js deve essere chiamato prima 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> 

Answer 7

Ho provato diversi metodi che non è riuscito, ma il seguito ha lavorato per me come un fascino:

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

Answer 8

Ecco come caricare avviso di bootstrap non appena il documento è pronto. E 'molto facile basta aggiungere

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

ho fatto un 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>

Answer 9

<form id="myform" class="form-wizard"> 
    <h2 class="form-wizard-heading">BootStap Wizzard 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> 

è possibile avviare il modal con il codice di sotto di questo.

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

Answer 10

Prova

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

Per aprire o chiudere il modal con id myModal.

Se quanto sopra non funziona, significa 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: - Assicurarsi che l'ordine è come sotto

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Other js files --> 
<script src="plugins/jQuery/bootstrap.min.js"></script>