[heading size=”h2″ style=”uk-module-title”]Modal Box[/heading]
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.
[line_break/]
| 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 |
[line_break/]
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.
[heading size=”h3″ style=”uk-module-title”]Size modifier[/heading]
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.
[line_break/] [heading size=”h3″ style=”uk-module-title”]Trigger a modal box from link[/heading][line_break/] [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] [line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][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][/code][line_break/] [heading size=”h3″ style=”uk-module-title”]Toggle modal box from buttons[/heading][line_break/] [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][line_break/][line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][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][/code][line_break/] [heading size=”h3″ style=”uk-module-title”]Toggle modal box for inline content[/heading]
The [modal_box] shortcode can also be used for inline content by using the following sytnax:
[badge style=”note uk-margin-top”]markup[/badge]
[code]<!– 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][/code][line_break/] [modal_box button style=”color” target=”mycontent”]Popup content[/modal_box] [modal_box content target=”mycontent” style=””] [heading size=”h3″ style=”uk-module-title”]Inline content[/heading]
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.
[/modal_box]
