Il Componente Modal è costituito, essenzialmente, da tre diversi elementi, nello specifico:

• Un’ overlay mediante il quale “nascondere” i contenuti della pagina
• Una finestra modale all’interno della quale dovranno essere inseriti i contenuti da mostrare
• Un pulsante di chiusura

Questi tre componenti dovranno rispettare un markup ben preciso e a ciascuno di essi dovrà essere assegnata una specifica classe.

In particolare sarà necessario considerare:

• Un primo contenitore esterno (tag div) da utilizzare come contenitore generale della finestra di dialogo e dell’overlay necessario per “nascondere” i contenuti della pagina.

A questa prima div dovrà essere assegnata la classe .uk-modal

ATTENZIONE! E’ di fondamentale importanza assegnare a questo elemento anche uno specifico id, che verrà poi utilizzato per attivare la visualizzazione della finestra modale

• Un secondo contenitore (tag div) interno al precedente necessario per creare la finestra di dialogo.

A questa seconda div dovrà essere assegnata la classe .uk-modal-dialog

ATTENZIONE! I contenuti della finestra modale dovranno essere inseriti all’interno di questo contenitore

• Un elemento, da inserire all’interno del contenitore di classe .uk-modal-dialog, necessario per creare il pulsante di chiusura della finestra modale.

In questo senso può essere utilizzato un semplice link (tag a) oppure un apposito pulsante (tag button).

In entrambi i casi sarà necessario assegnare a questo elemento la classe .uk-modal-close.

Si consiglia inoltre di assegnare a questo elemento anche la classe .uk-close in maniera tale da poter stilizzare il pulsante di chiusura come previsto dalle specifiche del Componente Close (per maggiori informazioni relativamente a questo componente si consiglia di consultare la documentazione ufficiale del framework a questo indirizzo http://getuikit.com/docs/close.html )

Il markup della nostra finestra modale dovrà quindi essere del tipo di quello qui di seguito indicato

<div id="my-id" class="uk-modal">

<div class="uk-modal-dialog">

<a class="uk-modal-close uk-close"></a>

Contenuti della finestra modale

</div>

</div>

In tutto ciò manca ancora un elemento fondamentale, vale a dire quello che ci consente di attivare la visualizzazione della finestra modale.

Anche in questo caso può essere utilizzato un semplice link (tag a) oppure un apposito pulsante (tag button).

Nel momento in cui si dovesse decidere di utilizzare un link sarà poi necessario:

• Utilizzare come destinazione del collegamento (valore della proprietà href) l’id del componente di classe .uk-modal
• Assegnare al tag a l’attributo addizionale data-uk-modal

Nel momento in cui si dovesse invece decidere di utilizzare un pulsante sarà invece necessario:

• Assegnare al tag button l’attributo addizionale data-uk-modal="{target:'#id'}" dove ovviamente al posto di #id andrà inserito l’identificativo del componente di classe .uk-modal

In definitiva dunque il markup completo al quale fare riferimento per poter implementare il componente Modal potrebbe essere il seguente

<!-- Pulsante per attivare la visualizzazione della finestra modale -->

<a href="#my-id" data-uk-modal>

Apri finestra

</a>

<!-- Finestra modale -->

<div id="my-id" class="uk-modal">

<div class="uk-modal-dialog">

<a class="uk-modal-close uk-close"></a>

Contenuti della finestra modale

</div>

</div>

ATTENZIONE! Nella configurazione considerata la finestra modale si chiuderà automaticamente anche cliccando in un qualsiasi punto dell’overlay esterno alla finestra stessa.