Una Modal Popup la si può definire una finestra che richiede all'utente di interagire con essa prima di ritornare ad operare con la finestra principale, ponendosi in primo piano ed impedendo la prosecuzione del flusso di lavoro se non viene, appunto, effettuata una scelta, inserimento dati, chiusura ecc.
Joomla! supporta nativamente le Modal Popup, servendosi di un file .css ed un file .js. Vediamo come fare.
Non si deve installare alcuna estensione. Ci si deve solo accertare che siano presenti un file .css ed un file .javascript.
Con un programma FTP accedere alla cartella remota nella quale è installato il CMS. Aprire la cartella /media/system/css/ e vedere se in essa è presente il file modal.css.
Stessa procedura per il file javascript. Aprire /media/system/js/ ed accertarsi che ci sia il file modal.js.
Questi 2 files vengono installati di default durante il processo l'installazione, appunto, di Joomla!. Per l'articolo in oggetto, le prove sono state fatte sulla versione 3.6.4
Accedere al file index.php
Il passaggio successivo prevede l'accesso alla cartella /templates/template-attivo/index.php.
template-attivo sta ad indicare che dobbiamo accedere alla cartella del template attualmente in uso.
Sempre con il programma FTP, portare sul desktop il file index.php. Aprirlo con un editor ed aggiungere il seguente codice:
JHTML::_( 'behavior.modal' );
anche scritto dopo i tag iniziali di apertura
// No direct access.
defined('_JEXEC') or die;
Quindi avremo:
// No direct access.
defined('_JEXEC') or die;
JHTML::_( 'behavior.modal' );
Salvare e chiudere il file index.php e riportarlo nella cartella del template.
Il codice html per la modal popup
Possiamo aprire la modal popup e mostrare un video, un testo, una immagine ecc. La prova per l'articolo è stata fatta con una immagine.
Aprire l'editor di Joomla! e disabilitarlo. Il codice che dobbiamo scrivere è:
<a class="modal" href="/images/nome-immagine.jpg"><img src="/images/nome-immagine2.jpg" alt="" width="" height="" /></a>
Accertarsi di assegnare la classe .modal al tag <a>
Come funziona il codice
Il behavior modal è una routine JavaScript che scorre attraverso l'output della pagina e ricerca ogni collegamento che abbia la classe .modal. Una volta trovato un link con la classe in oggetto, crea la finestra a comparsa sull'immagine riferita al collegamento.
Tale tecnica è chiamata unobtrusive javascript. L'enorme vantaggio è che degrada bene se JavaScript è disabilitato. Con questo si intende che, se il browser non supporta Javascript (cosa assai insolita), siamo in presenza di markup HTML valido. L'utente potrà vedere l'anteprima e l'immagine, a dimensioni reali, in un'altra pagina.
Di seguito una screenshot di una Modal Popup inserita in un articolo di Joomla!
