to top

Mon - Fri 8:30 am to 5:00 pm

Talk to us (800) 909 902


Nothing can be done without hope

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

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.

Stay in touch with the latest news

We'd like to send you our latest news.

Truford Pro

Truford Pro
Mirage Plaza, Waiyaki Way
Nairobi, Kenya
+254 (800) 909 902
+254 (800) 909 901


We are passionate about what we do. Here are our accolades.