Ho creato un bottone per la creazione di un box modale tramite bootstrap che passa variabili di un prodotto tramite il data-*
codice:
<button id="bottonI" type="button" class="btn btn-success" data-toggle="modal"
data-target="#exampleModal"
data-nome="'.$riga[1].'"
data-categoria="'.$riga[2].'"
data-condizione="'.$riga[3].'"
data-immagine="'.$riga[4].'"
data-informazioni="'.$riga[5].'"
>Info</button>
Il bottone si collega ad uno script javascript:
codice:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var nome = button.data('nome');
var modal = $(this);
var button = $(event.relatedTarget);
var categoria= button.data('categoria');
var modal = $(this);
var button = $(event.relatedTarget);
var condizione= button.data('condizione');
var modal = $(this);
var button = $(event.relatedTarget);
var immagine= button.data('immagine');
var modal = $(this);
var button = $(event.relatedTarget);
var informazioni= button.data('categoria');
var modal = $(this);
modal.find('.modal-title').text(nome);
});
all'interno della variabile "immagine" c'è il percorso dell'immagine che andrà poi posizionata all'interno del modal, però non ho la minima idea di come si possa mettere un'immagine tramite il javascript...
Questo è invece il modal di riferimento:
codice:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel"></h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">immagine:</label>
<img src="QUA CI ANDREBBE IL LINK ALL IMMAGINE" height="10%" width="40%">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>