Elements

If you can dream it, you can do it

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

markup
<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

markup
<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:

markup
<!-- 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

Inline content

Throughout life people will make you mad, disrespect you and treat you bad. Let God deal with the things they do, cause hate in your heart will consume you too. Be kind whenever possible. It is always possible.

demo