Elements

Modal Box

Use the uk-modal class to show a popup box with overlay. The uk-modal class can also be linked with these module positions: modal-a, modal-b and modal-c. By using one of these positions as your target, the modal box will show a popup of the modules that have be placed in these positions and assigned to the corresponding menu.

target	Description
modal-a	show modal box for modules in modal-a position
modal-b	show modal box for modules in modal-b position
modal-c	show modal box for modules in modal-c position

For each module linked to modal-a, modal-b or modal-c, you can use Module Class Suffix to style it just like a normal module. The target parameter can also be the id of a content section.

Size modifier

To adjust the size (width) of the modal box, add uk-modal-dialog-small or uk-modal-dialog-large to the Module Class of the module.

Trigger a modal box from link

modal-a modal-b modal-c

<a href="#modal-a" data-uk-modal>modal-a</a>
<a href="#modal-b" data-uk-modal>modal-b</a>
<a href="#modal-c" data-uk-modal>modal-c</a>

Toggle modal box from buttons

modal-a modal-b modal-c

<a class="uk-button uk-button-color href="#modal-a" data-uk-modal="">modal-a</a>
<a class="uk-button uk-button-color href="#modal-b" data-uk-modal="">modal-b</a>
<a class="uk-button uk-button-color href="#modal-c" data-uk-modal="">modal-c</a>

Toggle modal box for inline content

The uk-modal class can also be used for inline content by using the following sytnax:

<!-- create a link that will trigger the pop-up modal box -->
<a class="uk-button" href="#mycontent" data-uk-modal>Popup content</a>

<!-- create the content of the modal box -->
<div id="mycontent" class="uk-modal">
  <div class="uk-modal-dialog uk-panel-box-primary">
    <a href="" class="uk-modal-close uk-close"></a>
    your content goes here
  </div>
</div>

Popup content