Modal Box
Use the [modal_box] shortcode to show a popup box with overlay. The [modal_box] shortcode 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
[modal_box link target="modal-a"]modal-a[/modal_box] [modal_box link target="modal-b"]modal-b[/modal_box] [modal_box link target="modal-c"]modal-c[/modal_box]
Toggle modal box from buttons
modal-a modal-b modal-c
[modal_box button style="color" target="modal-a"]modal-a[/modal_box] [modal_box button style="color" target="modal-b"]modal-b[/modal_box] [modal_box button style="color" target="modal-c"]modal-c[/modal_box]
Toggle modal box for inline content
The [modal_box] shortcode can also be used for inline content by using the following sytnax:
<!-- create a link that will trigger the pop-up modal box --> [modal_box link target="mycontent"]my link[/modal_box] <!-- create the content of the modal box --> [modal_box content target="mycontent" style="uk-panel-box-primary"] ... [/modal_box]
Popup content