Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# 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
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.

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes

### modal-a position

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Believe in yourself! Have faith in your abilities. Module Class `uk-modal-dialog-small`

### modal-b position

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Believe in yourself! Have faith in your abilities and not your inabilities. Module Class `uk-modal-dialog-large`

### modal-c position

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Believe in yourself! Have faith in your abilities and not your inabilities.