Nella sua configurazione di base e con le impostazioni di default di uikit ogni finestra modale assume una larghezza di 600px e una larghezza massima del 100%.

Ovviamente è possibile variare questa impostazione sia agendo direttamente all’interno del file uikit.css

sia mediante l’apposito Customizer

Volendo è inoltre possibile variare in maniera “automatica” questa larghezza impostandola sempre su valori predefiniti ma comunque superiori ai precedenti 600px.

Per fare questo è sufficiente assegnare al contenitore utilizzato per identificare la finestra modale oltre alla classe .uk-modal-dialog anche la classe .uk-modal-dialog-large

.uk-modal-dialog-large: assegnata al contenitore della finestra modale fa si che, in condizioni di default, la sua larghezza sia di 930px per viewport compresi tra 768 e 1220 pixel, e di 1130px per viewport superiori a 1220px.

Il markup al quale fare riferimento sarà quindi 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 uk-modal-dialog-large">

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

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

Contenuti della finestra modale

</div>

</div>