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


4 Answers

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

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



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>




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

Ecco un esempio:

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



Related