Nel capitolo precedente abbiamo visto come nella sua configurazione base la finestra modale di uikit possa essere chiusa non solo cliccando sul relativo pulsante di chiusura ma anche cliccando in una qualsiasi altra posizione esterna alla finestra stessa.

Se l’esigenza dovesse invece essere quella di fare in modo che la finestra modale possa chiudersi solo ed esclusivamente cliccando sul relativo pulsante di chiusura sarà necessario apportare una semplice variazione al markup dell’elemento utilizzato per attivare la visualizzazione della finestra stessa. In particolare:

• Nel caso in cui si utilizzi come elemento di apertura della finestra modale un link, oltre ad utilizzare come destinazione del collegamento l’id del componente di classe .uk-modal, sarà necessario assegnare al tag a anche l’attributo addizionale data-uk-modal="{bgclose:false}"
• Nel caso in cui si utilizzi invece come elemento di apertura un pulsante, sarà necessario assegnare la tag button l’attributo addizionale data-uk-modal="{target:'#id',bgclose:false}", dove ovviamente al posto di #id andrà inserito l’identificativo del componente di classe .uk-modal

In entrambi i casi il valore bgclose:false garantirà che la finestra modale possa chiudersi solo cliccando sul relativo pulsante di chiusura (che in queste condizioni dovrà quindi essere necessariamente inserito all’interno della finestra modale)

Il markup di riferimento per ottenere questo risultato potrebbe quindi essere il seguente:

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

<a href="#my-id" data-uk-modal="{bgclose:false}">

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>