Home / Programmazione / Javascript - AJAX / Passare parametri al modal di Twitter Bootstrap
Mattepuffo

Passare parametri al modal di Twitter Bootstrap

Passare parametri al modal di Twitter Bootstrap

Il componente Modal di Twitter Bootstrap è molto comodo e facile da usare.

Ed è anche provvisto di vari eventi che possiamo controllare.

Oggi vediamo un semplice esempio di come possiamo passare dei parametri nel momento in cui lo richiamiamo.

(Do per scontato l'inclusione del framework nel nostro sito).

Questo il button da cui richimiamo la finestra:

 <button type="button" class="btn btn-primary btn-sm btn_img" data-id="hello">
       Visualizza immagine
</button>

Notate l'uso dell'attributo data-id.

Questo il codice HTML che rappresenta il Modal:

<div class="modal fade modal-vertical-centered" id="modal_img" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <img src="" alt="" id="img">
            </div>
        </div>
    </div>
</div>

Infine questo l'evento richiamato al click sul button:

    $(document).on("click", ".btn_img", function () {
        var dataId = $(this).data('id');
        $('#modal_img').modal('show');
        $(".modal-header .modal-title").text(dataId);
        $(".modal-body #img").attr("src", 'images/' + dataId + '.jpg');
        $(".modal-body #img").attr("alt", dataId);
    });

In questo caso voglio rappresentare una immagine sul Modal, dove il nome del file viene impostato al click sul button.

Dire che è tutto qua.

Enjoy!