Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2016
    Messaggi
    10

    Javascript e modal bootstrap

    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">&times;</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>
    Ultima modifica di manitta; 21-08-2016 a 17:04

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,514
    se in

    codice:
    data-immagine
    hai l'uri dell'immagine non serve altro che una cosa del tipo


    codice:
    $("#idImmagine").attr("src",uri);
    questo in genere. non mi sono messo ad analizzare il tuo codice...
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2016
    Messaggi
    10
    Quello che viene inviato da data-immagine è l'URL
    Esempio, data-immagine="./esempio.jpg"
    Dovrei farla così?
    $("immagine").attr("src",url);
    E per farla mettere sul modal?

  4. #4
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,514
    Ciao,
    per il codice usa il tag code. Sei nuovo quindi passi.

    tu ricavi l'uri in questo modo

    codice:
    var immagine= button.data('immagine');
    



    la modal deve essere

    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">&times;</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" id="mioId"  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>
    quindi


    codice:
    $("#mioId").attr("src",immagine);
    occhio al grassetto
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  5. #5
    Utente di HTML.it
    Registrato dal
    Aug 2016
    Messaggi
    10
    Ho modificato lo script javascript come hai detto tu
    <code>
    var button = $(event.relatedTarget);
    var immagine= button.data('immagine');
    var modal = $(this);
    var immagine= button.data('immagine');
    $("#mioId").attr("src",immagine);

    modal.find('.modal-title').text(nome);
    </code>

    e il modal inserendo la parte del imm code da te scritta
    <code>
    <div class="form-group">
    <label for="recipient-name" class="control-label">immagine:</label>
    <img src="" id="mioId" height="10%" width="40%">
    </div>
    </code>
    e messo un immagine in ogni percorso possibile per essere sicuro ma l'unica cosa che visualizzo alla pressione del bottone e alla visualizzazione del modal è la finestrella predefinita delle img

    Cattura.PNG

  6. #6
    Utente di HTML.it
    Registrato dal
    Aug 2016
    Messaggi
    10
    Ho risolto cosi
    Modal:
    codice:
    <div class="modal-body">
                    <img src="" alt="" id="img">
     </div>
    Javascript:
    codice:
    var button = $(event.relatedTarget);
            var immagine= button.data('immagine');
            var modal = $(this);
    	
    	$(".modal-body #img").attr("src", 'prodotti/' + immagine);

  7. #7
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,514
    Quote Originariamente inviata da manitta Visualizza il messaggio
    Ho risolto cosi
    Modal:
    codice:
    <div class="modal-body">
                    <img src="" alt="" id="img">
     </div>
    Javascript:
    codice:
    var button = $(event.relatedTarget);
            var immagine= button.data('immagine');
            var modal = $(this);
        
        $(".modal-body #img").attr("src", 'prodotti/' + immagine);

    puoi modificare in questo modo

    codice:
    $("#img").attr("src",'prodotti/'+ immagine);
    basta che id="img" sia univoco
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.