[Javascript] Come aprire una finestra modale Bootstrap usando jQuery?


Answers

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 community:

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

Question

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.

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



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

Puoi avviare il modal con il codice sotto questo.

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



Inoltre è possibile utilizzare tramite l'attributo dei dati

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

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



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

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



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)

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



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.

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




Se usi la funzione onclick dei link per chiamare un modal 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>



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

Ecco un esempio:

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



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

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