Aiutoo Finestra modale

di il
5 risposte

Aiutoo Finestra modale

Ciao a tutti, mi è stato richiesto di concludere il lavoro di un altro in poche ore è un emergenza, in javascript, peccato che io non lo conosca (conosco solo html e un pò il css). Mi chiedevo se qualcuno fosse così gentile da darmi il codice di una finestra modale (se si chiama così) tipo questa qua sotto che è solo una immagine di esempio.

- Le foto una volta cliccate cambiano con un altra immagine e così rimangono fisse (codice già presente), nel frattempo però si deve aprire una finestra in centro con un testo semplice con una immagine volendo, cliccando fuori si deve chiudere, tutto qui.

- Dovrei anche mettere dei link tipo quelli dell html, con un immagine che compare a lato e in basso (tipo come nell'esempio qui sotto) che riportano a una altra pagina nient'altro.


5 Risposte

  • Re: Aiutoo Finestra modale

    Conoscevo i lightbox ma non le finestre modali( credo sia giusta la traduzione del modal )
    http://www.ericmmartin.com/projects/simplemodal
    Questo e' un plugin per jquery che rende il tuo lavoro molto piu' semplice con relativo demo e spiegazione. Il codice e' praticamente gia fatto devi solo rispettare le sua convenzioni.
    Per creare l'immagine come lo vuoi tu usi il tag map e sei anche fortunato che sono solo dei quadrati, misuri la foto e lo dividi in pixel.
    http://www.w3schools.com/tags/tag_map.as
    http://www.w3schools.com/tags/tag_area.as
    Una volta creato le aree con jquery setti il gestore di clic dei vari area.
    Un buon sistema sarebbe inserire dentro a un div invisibile le tue finestre modali che poi recupererai attraverso magari una coincidenza di classe per non mandare in popup la finestra sbagliata.
    per evitare sovraposizioni di id potresti dare a area un id, e lo stesso valore alla relativa finestra modale esempio del caso io abbia un <area id="modal1"> avro un <div class="modal1"> naturalmente questa classe non dovra essere data ad altri perche' e' una convenzione privata creata per l'occorrenza.
    
    $(function(){
    $('area').click(function(){
    var id = this.id;
    $('#modalContainer').find('.'+id).modal();
    });
    });
    
    se hai rispettato la struttura descritta sopra questo codice dovrebbe funzionare con poche modifiche. naturalmente devi aver incluso il codice jQuery e quello del suo plugin in questione.
  • Re: Aiutoo Finestra modale

    Grazie mille della risposta! le immagini in realtà sarebbero 8 (8api) quindi forse non mi serve il tag maps.

    problema: non so usare jquery. mi compare solo un pagina di testo sul sito

    come faccio a chiudere la finestra cliccando semplicemente fuori e non sulla x (cioè interazione con la pagina madre)
  • Re: Aiutoo Finestra modale

    Ho scaricato jquery e il plugin, ho visto come funzionano e li ho testati con notepad++ però non so proprio come utilizzarli col mio codice
  • Re: Aiutoo Finestra modale

    Jquery e' codice javascript e va richiamato con attr. src del tag script, e vale lo stesso per il codice del plugin, l'importante e' mettere il tag con richiamo jquery prima anche se non sempre e' indispensabile. Se hai piu immagini dai una classe alle immagini e lo selezione di conseguenza in $('.imgClassName') e il resto e' uguale, e visto che usa le immagini va anche meglio perche nel mio codice mi ero dimenticato il preventDefault che avrebbe dato problemi nel caso delle map. avevo dato un'occhiata veloce e mi sembra che ci sia entrambe le possibilita', sia la ciusura da pulsante x che cliccando fuori.
  • Re: Aiutoo Finestra modale

    Grazie mille. Missione compiuta!
Devi accedere o registrarti per scrivere nel forum
5 risposte