javascript cdn v3 - Come aprire una finestra modale Bootstrap usando jQuery?





5 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

website docs collapse

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



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

Ecco un esempio:

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



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>



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

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



<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 modal con il codice sotto questo.

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



Related