The Modal component consists of an overlay, a dialog and an optional close button. You can use any element to toggle a modal dialog. To enable the necessary JavaScript, add the uk-toggle attribute. An <a> element needs to be linked to the modal's id. If you are using another element, like a button, just add the uk-toggle="target: #ID" attribute to target the id of the modal container.

Add the uk-modal attribute to a <div> element to create the modal container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling. Use the following classes to define the modal's sections.

PREVIEW
Open

Close button

To create a close button, enable its functionality and add proper styling and positioning, add the .uk-modal-close-default class to an <a> or <button> element. To place the close button outside the modal, add the .uk-modal-close-outside class.

Add the uk-close attribute from the Close component to apply a close icon.

PREVIEW

Center modal

To vertically center the modal dialog, you can use the .uk-margin-auto-vertical class from the Margin component.

Open

To divide the modal into different content sections, use the following classes.

Open

Group modifiers.

You can group multiple modals by linking from one to the other and back. Use this to create multistep wizards inside your modals.

PREVIEW

Modal 1 Modal 2

Media.

If you want to display media, you should first check, if the Lightbox component doesn't already offer everything you need. However, you can also use the modal to have more control over the markup to wrap your media in.

Note Use the uk-video attribute from the Video component to make sure videos are stopped when the modal is closed.

PREVIEW

Image Video YouTube Vimeo

Full modifier

To create a modal, that fills the entire page, add the .uk-modal-full class. It is also recommended to add the .uk-modal-close-full class to the close button, so that it adapts its styling.

Using the grid and width classes, you can create a nice, split fullscreen modal.

Open

Overflow

By default, the page will scroll with the modal, if its content exceeds the window height. To apply a scrollbar inside the modal, add the .uk-overflow-auto attribute from the Utility component to the modal body.

Open

Position content

To apply model contents a position components , add one of the .uk-position-* classes to your modal body.
.uk-position-top .uk-position-bottom .uk-position-left .uk-position-right

Open

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


© 2019 Sasuke. All Rights Reserved.